react创建组件的三种方法

• 组件的规则：
  1 )第一个字母必须大写
  2 ) 有自己的render方法
  3 )组件类只能包含一个顶层标签

3种创建组价的方法

• React.createClass()

let MyValues = React.createClass({
        PropTypes: {
            value : React.PropTypes.num.isRequired
        },

        render : function () {
            return <h1>{this.props.value}</h1>
        }
    });

    let value = "123";

    ReactDOM.render(
        <MyValues value = {value}>

        </MyValues>,
        document.getElementById("example")
    );

• 工厂函数组件（简单组件，没有状态的组件）

function Person(props) {
    return (
        <ul>
            <li>姓名 {props.name}</li>
            <li>年龄{props.age}</li>
            <li>性别{props.sex}</li>
        </ul>
    )
}
const p1 = {
        name: 'aa',
        sex:'boy'
    };  
ReactDOM.render(<Person...p1}/>,document.getElementById("example"));

特点：
1)组件不会被实例化，整体渲染性能得到提升
2)组件不能访问this对象
3)组件无法访问生命周期的方法
4)不涉及state的改变，只是传递props

• ES6类组件(复杂组件)React.Component

class P extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
        <ul>
            <li>姓名 {this.props.name}</li>
            <li>年龄{this.props.age}</li>
            <li>性别{this.props.sex}</li>
        </ul>
        ) }}
const p1 = {
        name: 'aa',
        sex:'boy'
    };
ReactDOM.render(<P{...p1}/>,document.getElementById("example1"));

注释：
... 作用
1.打包
2.解包
const arr1 = [1,2];
const arr2 = [5,...arr1,6];
简单的创建了基本组件，具体细节问题要着重注意。