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:'这是一个段落'
        }
    }
})

作者：yolanda_筱筱
链接：https://juejin.cn/post/6844903743587106824
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。