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

this.state: 组件的当前状态；
getInitialState:获取组件的初始状态，在组件加载的时候会被调用一次，返回值赋予this.state作为初始值
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属性到函数上

组件的嵌套组合

原文链接：https://www.f2er.com/react/305550.html