React: 组件的生命周期

在组件的整个生命周期中，随着该组件的 props 或者 state 发生变化，其 dom 变现也会相应变化。一个组件就是一个状态机，对于特定输入，总会返回一致的输出。
一个 React 组件的生命周期分为三部分：实例化、存在期和销毁时。

1.实例化

组件在 X 被实例化，第一次被创建时：

生命周期.png

① getDefaultProps

1. 该方法只会被调用一次。返回的对象可以用于设置默认的 props 值。

var Hello = React.creatClass({
    getDefaultProps: function() {
        return {
            name: 'pony',
            git: 'dwqs'
        }
    }
})

2. 挂载组件的时候设置props

var data = [{title: 'Hello'}];

3. 调用 setProps 来设置 props （不常用）【只能子组件或组件树调用，不能this.setProps 或 this.props 。使用 Hello.setProps({})】
4. propTypes 用来验证 props，是一个配置对象，用于定义属性类型：【初始化时，如传递的属性和 propTypes 不匹配，则打印 warn 日志。如果是可选配置，则可以去掉 isRequired】

var survey = React.createClass({
    propTypes: {
        survey: React.propTypes.shape ({
            id: React.propTypes.number.isRequired
        }).isRequired,
        onClick: React.PropTypes.func,
        name: React.PropTypes.string,
        score: React.PropTypes.array
        ...
    }
})

② getInitialState

1. 该方法的调用有且只有一次，用于初始化每个实例的state，可以访问组件的 props。【state 只存在组件的内部，props 在所有实例中共享】
2. 每次修改 state，都会重新渲染组件：
   a.shouldComponentUpdate
   b. componentWillUpdate
   c. render
   d. componentDidUpdate
3. getDefaultProps： 对于组件类只调用一次，后续该类的应用都不会被调用
   getInitialState： 对于每个组件实例都会调用一次，并且只调一次

③ componentWillMount

1. 该方法在首次渲染之前调用，【是 render 方法调用之前修改 state 的最后一次机会。】

④ render

1. 只能通过 this.props 和 this.state 访问数据（不能修改）
2. 可以返回 null,false 或者任何 React 组件
3. 只能出现一个顶级组件，不能返回一组元素
4. 不能该表组件的状态
5. 不能修改 DOM 的输出

⑤ componentDidMount

1. 该方法不会在服务器渲染的过程中被调用。可以在该方法中通过 this.getDOMNode() 访问到真实 DOM（推荐 ReactDOM.findDOMNode()）
2. 由于组件是虚拟 DOM，从组件获取真实 DOM 的节点，需要用到 ref 属性。【this.refs.[refName] 属性获取的是真实 DOM，所以必须等到虚拟 DOM 插入文档后，才可以使用这个属性，否则报错】

2.存在期

此时组件已经渲染好并且用户可以与其交互（鼠标点击、手指点按...），导致应用状态改变，将如下顺序被调用。

1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDIdUpdate

① componentWillReceiveProps

1. 父组件修改 props 属性时，componentWillReceiveProps 将被调用。可以在方法中更新 state ，来触发 render 方法重新渲染。

② shouldComponentUpdate

1. 通过在该方法中返回 false 来阻止组件渲染。返回 false 时，将不再继续向下执行。

③ componentWillUpdate

1. 重新渲染前，componentWillUpdate( object nextProps, object nextState )会被调用。【不要在该方法中再去更新 props 或者 state】

④ componentDidUpdate

1. 组件重新渲染之后，componentDidUpdate( object prevProps, object prevState )会被调用。可以在这里访问并修改 DOM。

3.销毁时

① componentWillUnmount

1. React 使用完一个组件时，该方法被执行，完成清理和销毁工作。在 componentDidMount 中添加的任务需要在此撤销。
2. 当再次装载组件时，以下方法被调用：
   a. getInitialState
   b. componentWillMount
   c. render
   d. componentDidMount

总结

总结.png