React的生命周期（面试必问）

React的生命周期

两张图带你理解 React的生命周期

React的生命周期（旧）

 class Life extends React.Component{
      // 构造器
      constructor(props){
        console.log('Life构造器---constructor');
        super(props)
        this.state={num:0}
      }
      // 计算+1功能
      add=()=>{
        const {num} = this.state
        this.setState({num:num+1})
      }
      // 删除组件
      death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('text'))
      }
      force=()=>{
        this.forceUpdate()
      }
      // 将要挂载
      componentWillMount(){
        console.log('Life将要挂载---componentWillMount');
      }
      // 已经挂载
      componentDidMount(){
        console.log('Life已经挂载---componentDidMount');
      }
      // 删除触发
      componentWillUnmount(){
        console.log('Life删除触发---componentWillUnmount');
      }
      // 是否应该改变数据
      shouldComponentUpdate(){
        console.log('Life是否改变数据---shouldComponentUpdate');
        return true
      }
      // 将要改变数据
      componentWillUpdate(){
        console.log('Life将要改变数据---componentWillUpdate');
      }
      // 改变数据
      componentDidUpdate(){
        console.log('Life改变数据---componentDidUpdate');
      }
      render(){
        console.log('Life---render');
        const {num} = this.state
        return(
          <div>
          <h1>计数器：{num}</h1> 
          <button onClick={this.add}>点我+1</button> 
          <button onClick={this.death}>删除</button> 
          <button onClick={this.force}>不更改任何状态的数据，强制更新</button> 
          </div>
        )
      }
    }
    // 渲染页面
    ReactDOM.render(<Life />, document.getElementById('text'))

挂载步骤

更新步骤

删除

总结：

1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
   1. constructor() ---构造器
2. componentWillMount() ---将要挂载
3. render() ---render
4. componentDidMount() ---挂载时
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
   1. shouldComponentUpdate() ---是否要进行更改数据
2. componentWillUpdate() ---将要更新数据
3. render()
4. componentDidUpdate() ---更新数据
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
   componentWillUnmount() ---卸载

React的生命周期（新）

生命周期的三个阶段（新）

4. 初始化阶段: 由ReactDOM.render()触发—初次渲染
   1. constructor()
   2. getDerivedStateFromProps
   3. render()
   4. componentDidMount()
5. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
   1. getDerivedStateFromProps
   2. shouldComponentUpdate()
   3. render()
   4. getSnapshotBeforeUpdate
   5. componentDidUpdate()
6. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
   1. componentWillUnmount()

重要的勾子

1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax请求
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate

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