React学习之组件与props

说明：本系列所有demo代码的github地址为：https://github.com/Brucewu998/react.js-learning，笔者会不断更新这些代码，本篇代码在目录下demo-03文件夹下。

组件

组件允许我们将UI拆分为独立可复用的代码片段，并对每个代码片段进行独立构思，并且React的组件接受任意的入参props，即父组件可以利用props向子组件传值，稍后会再做讲解。在React中，有两种方式可以用于创建组件：

函数组件，就是以JavaScript函数方式创建的组件，形式如下

function Title(props){
    return 
{props.title}
}

ES6 class 组件，这里采用ES6 的 class 语法来创建一个组件，则上面的函数组件创建为：

class Title extends React.Component{
    constructor(props) {
        super(props); //继承React
    }

    render() {
        return 
{this.props.Title}
    }
}

由React学习之元素渲染一文，可知组件应当通过ReactDOM.render渲染出来：

ReactDOM.render(
    


    

    

上一篇：React学习之元素渲染

下一篇：React学习之获取真实DOM节点