React 生命周期总结（新旧对比）

一、生命周期（旧）

//案例：点击按钮加1
class Count extends React.Component{
  //1.构造器
  constructor(props){
    super(props)
    //初始化状态
  	state = {count:0}
  }
    
  //2.componentWillMount
  //组件将要挂载
  componentWillMount(){}

	//3.render
	//渲染组件
  render(){
    return(
      const {count} = this.state
      <div>
        <h2>当前求和：{this.state.count}</h2>
        <button onClick={this.add}>点我加1</button>
      	<button onClick={this.death}>卸载</button>
      	<button onClick={this.force}>不更改任何数据，强制更新</button>
      </div>
    )
  }
  
	//4.componentDidMount
  //组件挂载完毕的钩子
	componentDidMount(){}

	//5.componentWillUnmount
	//组件将要卸载
	componentWillUnmount(){}

	//更新部分///

	//1.shouldComponentUpdate
	//决定组件是否更新的“阀门”
	//不写默认返回true 
	//必须返回Boolean
	shouldComponentUpdate(){}

	//2.componentWillUpdate
	//组件将要被更新
	componentWillUpdate(){}

	//3.componentDidUpdate
	//组件更新完毕
	componentDidUpdate(){}

	add= ()=>{
  	const {count} = this.state;
    this.setState({count:count+1});
  }
  
  //卸载组件
  death = ()=>{
    ReactDOM.unmountComponetAtNode(document.getElementById('test'))
  }
  
  //强制更新
  force= ()=>{
  	this.forceUpdate();
  }

}

//4.componentWillReceiveProps
//父组件更新时，向子组件传递参数时，会调用此函数
//注意：首次传递不会调用，第二次传递才会调用
componentWillReceiveProps(){}

总结：

1. 初始化阶段：由ReactDOM.render( )触发-----初次渲染
   1. Constructor( )
   2. componentWillMount( )
   3. render( )
   4. componentDidMount( )-------常用，一般做初始化的事，开启定时器和发送网络请求
2. 更新阶段：由组件内部this.setState( )或父组件render触发
   1. shouldComponentUpdate()
   2. componentWillUpdate()
   3. render( )--------必须要使用的一个
   4. componentDidUpdate()
3. 卸载组件：由ReactDOM.unmountComponentAtNode( )触发
   1. componentWillUnmount()------常用，一般都是做收尾的事，关闭定时器和取消订阅消息

二、生命周期（新）

总结：

1. 初始化阶段: 由ReactDOM.render()触发-----初次渲染

   1. constructor()
   2. getDerivedStateFromProps-------表明state完全取决于props
   3. render()
   4. componentDidMount()

2. 更新阶段:由组件内部this.setSate()或父组件重新render触发

   1. getDerivedStateFromProps
   2. shouldComponentUpdate()
   3. render()
   4. getSnapshotBeforeUpdate-------在更新之前保留页面的快照信息
   5. componentDidUpdate()

3. 卸载组件:由ReactDOM.unmountComponentAtNode()触发

   1. componentWillUnmount()

即将废弃的勾子:

1. componentWillMount

2. componentWillReceiveProps

3. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。