React创建组件的三种方式

使用函数式创建

import {render} from \'react-dom\';
function Hello(props){
    return (<div>{props.name}</div>)
}

render(<Hello name=\'yf\' />,document.getElementById(\'root\'))

使用React.createClass方式创建

import React from \'react\';
import {render} from \'react-dom\';
const Hello = React.createClass({
    getInitialState:function(){
        return {text:this.props.initialValue || \'placeholder\'}
    },
    render:function(){
        return (<div>
                <input type=\'text\' value={this.state.text} />
                </div>)
    }
})

render(<Hello initialValue=\'aaa\' />,document.getElementById(\'root\'))

使用React.Component创建

为了更好的实现复用，React极力推荐使用React.Component创建组件来取代React.createClass方法创建。是以ES6的形式来创建react的组件的

import React from \'react\';
import {render} from \'react-dom\';

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            text:this.props.initalValue || \'placeholder\'
        }
    }
    render(){
        return (<div>
                <input type=\'text\' value={this.state.text} />
            </div>)
    }
}

render(<Hello initalValue = \'aaa\' />,document.getElementById(\'root\'))

JSX语法

const Hello = ()=>{
    return (<div>
                <p>这是一个段落</p>
            </div>)
}

而这种JSX语法最终会被转换为React.createClass的方式被调用

const Hello = React.createClass({
    render(){
        return (<div>
                    <p>这是一个段落</p>
                </div>)
    }
})

//向下和解（Top-Down Reconciliation）

//最终转换的形式为DOM element形式


const Hello = ()=>({
    type:\'div\',
    props:{
        children:{
            type:\'p\',
            children:\'这是一个段落\'
        }
    }
})

const Hello = React.createClass({
    type:\'div\',
    props:{
        children:{
            type:\'p\',
            children:\'这是一个段落\'
        }
    }
})

相关文档：

https://tylermcginnis.com/react-elements-vs-react-components/

https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html