React之组件的生命周期

在组件的整个生命周期中，随着该组件的props或者state的改变,它的DOM表现也将有相应的变化。一个组件就是一个状态机：对于特定的输入，总会返回一致的输出。
React 为每个组件，提供了生命周期钩子函数去响应不同的时刻：

• 创建时
• 存在期
• 销毁期

生命周期方法

React仅仅提供你所需要的方法而不去追求全面。

实例化

一个实例初次被创建时所调用的生命周期方法与其它各个后续实例被创建时所调用的方法略有不同。
当你首次使用一个组件事下面方法依次被调用：

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidmount
  对于该组件的后续应用，下面的方法依次被调用，但getDefaultProps将不会被调用。
• getInitialState
• componentWillMount
• render
• componentDidmount

存在期

随着应用状态的改变，以及组件逐渐受到影响下面的方法将被调用。

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

  销毁和清理期

  最后，当使用完成后
• componentWillUnmount
  方法将会调用，给这个组件清理自身的机会。

实例化

当组件被创建或者首次渲染时候，有一系列的方法可以用来做准备工作，这些方法都有明确的职责

• getDefaultProps 对于该组件只调用一次，该方法返回的对象为该组件的默认props值
• getInitialState 每个该组件的实例调且只调一次，用于初始化state，你可以在这里访问到this.props
• componentWillMount 该方法会在完成首次渲染之前被调用，这也是render方法调用钱可前修改组件state的最后机会
• render 在这里你会创建一个虚拟的DOM，用来表示组件的输出，唯一必须的方法
• componentDidmount 在render成功调用后你可以在该方法里面的 this.getCOMNode 方法里访问到dom （在服务端该方法不会调用）

存在期

此时组件已经渲染好了，用户可以和组件进行交互。

• componentWillReceiveProps 当props被父组件更改时该方法将会被调用，此时你就获得了更改props 和 更新state的机会。比如父组件更改RadioInput的布尔值来更新该组件的state：

  1 2 3 4 5 6 7

  componentWillReceiveProps(props) { if(props.checked){ this.setState({ checked: props.checked }); } }

• shouldComponentUpdate 该方法可以在组件渲染时候对其进行精确优化，如果你确定该组件及其子组件的任何props和state都不需要改变，就让该方法返回false。此时将会跳过render以及前后的钩子componentWillUpdate

  首次渲染和调用了forceUpdate时候这个方法不会调用。

• componentWillUpdate

• componentDidUpdate

销毁期

• componentWillUnmount