生命周期方法

组件的生命周期分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
  • shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

挂载：componentWillMount

1. 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。
2. 如果在这个方法内调用 setState，render() 将会感知到更新后的 state
3. 用法

   React.createClass({componentWillMount() {...}
   });

挂载： componentDidMount

1. 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）
2. 在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点
3. 发送 AJAX 请求，可以在该方法中执行这些操作
4. 例子

   React.createClass({componentDidMount() {...}
   });

移除： componentWillUnmount

1. 在组件从 DOM 中移除的时候立刻被调用
2. 在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素
3. 例子

   React.createClass({componentWillUnmount() {...}
   });

更新： componentWillReceiveProps

1. 在组件接收到新的 props 的时候调用 ； 在初始化渲染的时候，该方法不会调用
2. 用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state
3. 老的 props 可以通过 this.props 获取到
4. 在该函数中调用 this.setState() 将不会引起第二次渲染。
5. 注意：对于 state，没有相似的方法，如果需要在 state 改变的时候执行一些操作，请使用 componentWillUpdate。
6. 例子

   React.createClass({componentWillReceiveProps(nextProps) {this.setState({})}
   });

更新： shouldComponentUpdate

1. 返回：boolean； 参数1：object nextProps ； 参数2：object nextState
2. 在接收到新的 props 或者 state，将要渲染之前调用 ； 该方法在初始化渲染的时候不会调用 ； 使用 forceUpdate 方法的时候也不会
3. 如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。默认情况下，shouldComponentUpdate 总会返回 true
4. 如果 shouldComponentUpdate返回false，则 render() 将不会执行，直到下一次 state 改变。另外，componentWillUpdate 和 componentDidUpdate 也不会被调用
5. 例子

   React.createClass({shouldComponentUpdate(nextProps, nextState) {return false}
   });

更新： componentWillUpdate

1. 参数1：object nextProps  参数2：object nextState
2. 在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。
3. 注意：你不能在刚方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps
4. 例子

   React.createClass({componentWillUpdate(nextProps, nextState) {...}
   });

更新： componentDidUpdate

1. 参数1：object prevProps  ； 参数2：object prevState
2. 在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用
3. 使用该方法可以在组件更新之后操作 DOM 元素。
4. 注意：为了兼容 v0.9，DOM 节点会作为最后一个参数传入。如果使用这个方法，你仍然可以使用 this.getDOMNode()来访问 DOM 节点
5. 例子

   React.createClass({componentDidUpdate(nextProps, nextState) {...}
   });

例子： 路由切换时，组件生命周期的变化情况

路由配置如下：

<Route path="/" component={App}><IndexRoute component={Home}/><Route path="invoices/:invoiceId" component={Invoice}/><Route path="accounts/:accountId" component={Account}/>
</Route>

1. 当用户打开应用的 '/' 页面

2. 当用户从 '/' 跳转到 '/invoice/123'

• App 从 router 中接收到新的 props（例如 children、params、location 等数据), 所以 App 触发了 componentWillReceiveProps 和 componentDidUpdate 两个生命周期方法

• Home 不再被渲染，所以它将被移除，触发 componentWillUnmount

• Invoice 首次被挂载 触发 componentWillMount 和 componentDidMount

3. 当用户从 /invoice/123 跳转到 /invoice/789

• 所有的组件之前都已经被挂载， 所以只是从 router 更新了 props.

4. 当从 /invoice/789 跳转到 /accounts/123