生命周期函数

当通过调用 React.createClass() 来创建组件的时候，你应该提供一个包含 render 方法的对象，并且也可以包含其它的在这里描述的生命周期方法。

首次加载时触发的生命周期

  1. class App extends React.Component{
  2.     constructor(){
  3.         super()
  4.             console.log('constructor')
  5.     }
  6.     componentWillMount(){
  7.         console.log('will Mount')
  8.     }
  9.     componentDidMount(){
  10.         console.log('did Mount')
  11.     }
  12.     render(){
  13.         console.log('render')
  14.         return(
  15.             <div>
  16.                 App
  17.             </div>
  18.         )
  19.     }
  20. }
  21. export default App

constructor（自带的默认方法传递state和props）

  • 构造函数，只有初始化时调用载一次

comonentWillMount 挂载前

  • 在组件挂载之前调用一次。如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。

render 挂载（必须）

  • 返回值必须是一个React的element（JSX节点），不能在render内修改state

comonentDidMount 挂载完成后

  • 在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。

更新阶段（重新渲染）

state被setState修改或props被修改会触发更新

  1. import React from 'react'
  3. class App extends React.Component{
  4.     constructor(){
  5.         console.log('constructor')
  6.         super()
  7.         this.state = ({
  8.             num:0
  9.         })  
  10.     }
  11.     componentWillMount(){
  12.         console.log('will Mount')
  13.     }
  14.     componentDidMount(){
  15.         console.log('did Mount')
  16.     }
  17.     shouldComponentUpdate(nextProps,nextState){
  18.         console.log('should Update',nextProps,nextState)
  19.         return true
  20.     }
  21.     componentWillUpdate(){
  22.         console.log('will Update')
  23.     }
  24.     componentDidUpdate(){
  25.         console.log('did Update')
  26.     }
  27.     render(){
  28.         console.log('render')
  29.         return(
  30.             <div>
  31.                 <p>{this.state.num}</p>
  32.                 <button onClick={() => this.setState({num:++this.state.num})}>+1</button>
  33.             </div>
  34.         )
  35.     }
  36. }
  37. export default App

shouldComponentUpdate （判断是否需要重新渲染组件）

  • 必须有返回值（返回值为一个bool值）如果返回true重新render（渲染）。
  • shouleComponentUpdata(nextProps,nextState)的两个参数（形参）

componentWillUpdate （重新渲染前）

  • shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。
  • 除了首次render之后调用componentWillMount，其它render结束之后都是调用componentWillUpdate。

render（渲染）

componentDidUpdate（渲染完成后）

  • 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

子组件的生命周期流程

子组件

  1. import React from 'react'
  3. class Test extends React.Component{
  4.     constructor(){
  5.         super()
  6.         console.log('test constructor')
  7.     }
  8.     componentWillMount(){
  9.         console.log('test will Mount')
  10.     }
  11.     componentDidMount(){
  12.         console.log('test did Mount')
  13.     }
  14.     shouldComponentUpdate(nextProps,nextState){
  15.         console.log('test should')
  16.         return true
  17.     }
  18.     componentWillUpdate(){
  19.         console.log('test Update')
  20.     }
  21.     componentDidUpdate(){
  22.         console.log('test did Update')
  23.     }
  24.     render(){
  25.         console.log('text render')
  26.         return (
  27.             <div className='Test'>  
  28.                 <span>{this.props.num}</span>
  29.             </div>
  30.         )
  31.     }
  32. }
  33. export default Test

父组件

  1. import React from 'react'
  2. import Test from './Test'
  4. class App extends React.Component{
  5.     constructor(){
  6.         console.log('constructor')
  7.         super()
  8.         this.state = ({
  9.             num:0
  10.         })  
  11.     }
  12.     componentWillMount(){
  13.         console.log('will Mount')
  14.     }
  15.     componentDidMount(){
  16.         console.log('did Mount')
  17.     }
  18.     componentWillReceiveProps(nextProps){
  19.         console.log('ReceiveProps',nextProps)
  20.     }
  21.     shouldComponentUpdate(nextProps,nextState){
  22.         console.log('should',nextProps,nextState.num)
  23.         if(nextState.num>10){
  24.             alert('超过上限')
  25.             this.btn.disabled = true
  26.         }else{
  27.             return true
  28.         }
  29.     }
  30.     componentWillUpdate(){
  31.         console.log('Update')
  32.     }
  33.     componentDidUpdate(){
  34.         console.log('did Update')
  35.     }
  36.     render(){
  37.         console.log('render')
  38.         return(
  39.             <div>
  40.                 <Test num={this.state.num} />
  41.                 <input type='button' value='+1' ref={btn => this.btn = btn} onClick={() => this.setState({num:++this.state.num})} />
  42.             </div>
  43.         )
  44.     }
  45. }
  46. export default App

componentWillReceiveProps（props改变时触发）

  • props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。

销毁组件

子组件（要销毁的组件）

  1. import React from 'react'
  3. class Test extends React.Component{
  4.     constructor(){
  5.         super()
  6.         console.log('test constructor')
  7.     }
  8.     componentWillMount(){
  9.         console.log('test will Mount')
  10.     }
  11.     componentDidMount(){
  12.         console.log('test did Mount')
  13.     }
  14.     shouldComponentUpdate(nextProps,nextState){
  15.         console.log('test should')
  16.         return true
  17.     }
  18.     componentWillUpdate(){
  19.         console.log('test Update')
  20.     }
  21.     componentDidUpdate(){
  22.         console.log('test did Update')
  23.     }
  24.     componentWillUnmount(){
  25.         console.log('test Un')
  26.     }
  27.     render(){
  28.         console.log('text render')
  29.         return (
  30.             <div className='Test'>  
  31.                     <span>{this.props.num}</span>
  32.             </div>
  33.         )
  34.     }
  35. }
  36. export default Test

父组件

  1. import React from 'react'
  2. import Test from './Test'
  4. class App extends React.Component{
  5.     constructor(){
  6.         console.log('constructor')
  7.         super()
  8.         this.state = ({
  9.             num:0,
  10.             show:true
  11.         })  
  12.     }
  13.     componentWillMount(){
  14.         console.log('will Mount')
  15.     }
  16.     componentDidMount(){
  17.         console.log('did Mount')
  18.     }
  19.     componentWillReceiveProps(nextProps){
  20.         console.log('ReceiveProps',nextProps)
  21.     }
  22.     shouldComponentUpdate(nextProps,nextState){
  23.         console.log('should',nextProps,nextState.num)
  24.         if(nextState.num>10){
  25.             alert('超过上限')
  26.             this.btn.disabled = true
  27.         }else{
  28.             return true
  29.         }
  30.     }
  31.     componentWillUpdate(){
  32.         console.log('Update')
  33.     }
  34.     componentDidUpdate(){
  35.         console.log('did Update')
  36.     }
  37.     render(){
  38.             console.log('render')
  39.             return(
  40.                 <div>
  41.                     { this.state.show ? <Test num={this.state.num} /> : null }
  42.                     <input type='button' value='+1' ref={btn => this.btn = btn} onClick={() => this.setState({num:++this.state.num})} />
  43.                     <input type='button' value='销毁' onClick={() => this.setState({show:false})} />
  44.                 </div>
  45.         )
  46.     }
  47. }
  48. export default App

componentWillUnmount （销毁组件）

  • 组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。很少应用

生命周期函数进程

生命周期函数图