React组件

创建一个React组件

创建组件需要调用React.createClass方法，传入的参数为一个对象，对象必须定义一个render方法，render方法返回值为组件的渲染结构，也可以理解为一个组件实例，返回值有且只能为一个组件实例，或者返回null/false，当返回值为null/false的时候，React内部通过标签替换

无状态组件

除了可以通过React.createClass来创建组件以外，组件也可以通过一个普通的函数定义，函数的返回值为组件渲染的结果。
无状态组件能够优化性能，不需要维护状态，React内部不会有一个对应的组件实例，也没有声明周期hook

渲染组件到DOM

主要步骤：
1. 在html中顶一个一个元素，设置id属性
2. JSX中调用ReactDOM.render方法，第一个参数为组件，第二个为刚才定义的DOM元素

组件的渲染：
需要注意的点：
1. 组件可以渲染到多个元素，任意位置的元素；
2. 在程序运行时，能动态调用render；

组件状态State

React组件中可以存储自己的当前状态，其渲染结果由组件属性和状态共同决定，状态和属性的区别是，状态维护在组件内部，属性是由外部控制

控制状态的API

1. this.state: 组件的当前状态；
2. getInitialState:获取组件的初始状态，在组件加载的时候会被调用一次，返回值赋予this.state作为初始值
3. this.setState:组件状态改变时，可以通过this.setState修改状态；setState方法支持按需修改，如state有两个字段，仅当setState传入的对下你给包含字段才会被修改；每次次奥用setState会导致重渲染调用render方法；直接修改state不会重渲染组件。

组件属性props

React组件可以传递属性给组件，传递方法和HTML没有差异，可以通过this.props获取组件属性，属性相关API为：
1. this.props：获取属性值；
2. getDefaultProps: 获取默认属性对象，会被调用一次，当组件类创建的时候会被调用，返回值会被缓存起来，当组件被实例化过后如果传入的属性没有值，会返回默认属性值
3. this.props.children: 子节点属性
4. propTypes: 属性类型检查

children属性

组件属性中有一个特殊属性，表示子组件

属性类型检查

为了保证组件传递属性的正确性，可以通过定义propsType对象来实现对组件属性的严格校验：

    var MyComponent = React.createClass({        propTypes: {            optionalArray: React.PropTypes.array,            optionalBool: React.PropTypes.bool,            optionalFunc: React.PropTypes.func,            optionalNumber: React.PropTypes.number,            optionalObject: React.PropTypes.object,            optionalString: React.PropTypes.string,            // 任何可以被渲染的包括，数字，字符串，组件，或者数组            optionalNode: React.PropTypes.node,            // React 元素            optionalElement: React.PropTypes.element,            // 枚举            optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),            // 任意一种类型            optionalUnion: React.PropTypes.oneOfType([              React.PropTypes.string,              React.PropTypes.number,              React.PropTypes.instanceOf(Message)            ]),            // 具体类型的数组            optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),            // 具体类型的对象            optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),            // 符合定义的对象            optionalObjectWithShape: React.PropTypes.shape({              color: React.PropTypes.string,              fontSize: React.PropTypes.number            }),            requiredFunc: React.PropTypes.func.isRequired,            requiredAny: React.PropTypes.any.isRequired,            // 自定义校验            customProp: function(props, propName, componentName) {}        }    });

属性单向传递

React的单向数据流模式，数据的流动管道是props，流动的方向是组件的层级自顶向下的方向，所以一个组件不能修改自身属性，组件的属性一定是通过父组件传递过来的或者默认属性

无状态组件属性

对于无状态组件，可以添加.propTypes和.defaultProps属性到函数上

组件的嵌套组合