创建React组件的几种方式的对比

1.React.createClass创建组件方式

import React,{Component} from 'react';

const Foo = React.createClass({
    render(){
        return(
            <div>我的传统的方式创建的组件</div>
        )
    }
})
export default Foo;

2.ES6 class创建方式

import React,{Component} from 'react';

export default class Test extends Component{
    render(){
        return(
            <div>我是Es6的class创建方式创建的</div>
        )
    }
}

3.无状态函数创建方式

import React,{Component} from 'react';

export default function Bar() {
    return(
        <div>我是无状态函数创建方式</div>
    )
}

4.关于无状态组件之间数据传递的方式

import React, {Component} from "react";

//创建一个组件
function Button(props) {
    return(
        <button style={{background:props.color}}>{props.children}</button>
    )
}
Button.propTypes = {
    color:React.PropTypes.string.isRequired,
    children:React.PropTypes.string.isRequired,
}

//创建第二个组件
function Message(props){
    return(
        <li>
            <p>{props.text}</p>
            <Button color={props.color}>Delete</Button>
        </li>
    )
}

Message.propTypes = {
    text:React.PropTypes.string.isRequired,
    color:React.PropTypes.string.isRequired,
}

//创建主组建
export default function MessageList() {
    const color="red";
    const message = [
        {text:'Hello React'},
        {text:'Hello Redux'},
    ];
    return(
        <div>
            <p>通过props将color逐层传递给Button组件</p>
            {
                message.map((item,index)=>(
                    <Message key={`list-${index}`} color={color} text={item.text}/>
                ))
            }
        </div>
    )
}

5.无状态组件的说明

• 无状态组件没有实例化对象，因此无法使用生命周期函数，也没有内部状态