React 生命周期

React 生命周期

初始化阶段

1. constructor()
   • 作用：初始化属性和定义状态
   • 初始化属性：将父组件绑定在子组件身上的属性获取到，然后通过super继承给子组件 的porps属性上
   • 定义状态

   constructor(props){
       super(props)
       this.state={
           name:'tinayyy'
       }
   }
   

2. componentWillMount() 组件挂载之前
   • 在组件挂载之前调用且全局只调用一次。在这个钩子里可以setState，render后可以看到更新后的state，不会触发重复渲染。该生命周期可以发起异步请求，并setState。（React v16.3后废弃该生命周期，可以在constructor中完成设置state）
   • 做组件即将挂载的准备工作
   • 这个钩子可以进行数据的同步修改
   • setState在这个中是可以起作用的
   • 16.x 版本使用
   • 数据可以获取到
   • 真实dom没有拿到
   • 类似 vue create + beforeMount
   • 数据请求 + 数据修改
   • 可能会产生副作用和其他的订阅
     1. 副作用： 计时器 、 滚轮事件
3. render() 渲染组件
   • 作用：jsx -> vdom js对象模型
   • render是一个React组件必须定义的生命周期，用来渲染dom。⚠️不要在render里面修改state，会触发死循环导致栈溢出。render必须返回reactDom

    render () {
        return (
        <Fragment>
            <h3> 生命周期 </h3>
        </Fragment>
        )
    }
   

4. componentDidMount() 组件挂在完成后
   • 数据拿取到
   • 真实DOM也可以拿取到
   • 数据请求+数据修改
   • 真实DOM操作【第三方库实例化】
   • 在组件挂载完成后调用，且全局只调用一次。可以在这里使用refs，获取真实dom元素。该钩子内也可以发起异步请求，并在异步请求中可以进行setState。

更新阶段

props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：

1. componentWillReceiveProps() props改变触发
   • 触发：* props改变触发
     * nextProps是改变后的值
     * this.props.xxx 是改变前的值
   • 作用： 检测项目中的一些变化情况
   • React 路由监听
     nextProps.xxx === this.props.xxx ? 证明某一个属性( xxx )没有改变
     使用场景： 检测到项目中某一个按钮是否触发： 点击注册自动跳转登录
2. shouldComponentUpdate() 是否重新渲染
   • 作用： 决定组件是否要更新
   • 必须要有返回值，默认返回值是true
   • shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。不能在该钩子中setState，会触发重复循环。(React v16.3后废弃该生命周期，可以用新的周期 getSnapshotBeforeUpdate )
3. componentWillUpdate()
   • 组件即将更新
   • 为整个更新，做准备工作
   • 类似于vue beforeUpdate
   • 拿到的是更新前的数据 ,可以获得更新后的真实dom
   • 项目中：
     这个钩子项目中我们一般不去使用它
   • 不能在该钩子中setState，会触发重复循环。(React v16.3后废弃该生命周期，可以用新的周期 getSnapshotBeforeUpdate )
4. componentDidUpdate() 完成组件渲染
   • 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。该钩子内setState有可能会触发重复渲染，需要自行判断，否则会进入死循环。

卸载阶段

1. componentWillUnMount () 组件即将被卸载
   • 组件卸载时触发
   • 做善后
   • 计时器、滚轮事件、第三方库实例化出来的实例

• React组件内部销毁

  destory = () => {
    /* 
      React组件内部销毁
        * unmountComponentAtNode( Node ) Node是整个项目最大的容器
          ReactDOM.unmountComponentAtNode( document.getElementById('root') ) 
        * 这个方法可以删除组件的DOM外壳
      
      不推荐大家使用
    */
   
    ReactDOM.unmountComponentAtNode( document.getElementById('root') )
  }

  render () {
    return (
      <Fragment>
        <h3> 生命周期 </h3>
        <button onClick = { this.destory }> 内部销毁 </button>
      
      </Fragment>
    )
  }

错误处理阶段

1. componentDidCatch()

   • 错误边界是React组件，可以在其子组件树中的任何位置捕获JavaScript错误，记录这些错误并显示回退UI，而不是崩溃的组件树。错误边界在渲染期间，生命周期方法以及整个树下的构造函数中捕获错误。

   • 如果类组件定义了此生命周期方法，则它将成错误边界。在它中调用setState()可以让你在下面的树中捕获未处理的JavaScript错误，并显示一个后备UI。只能使用错误边界从意外异常中恢复; 不要试图将它们用于控制流程。

   • 错误边界只会捕获树中下面组件中的错误。错误边界本身不能捕获错误。
     ###新增

2. static getDerivedStateFromProps(nextProps, prevState)
   • 触发时间：在组件构建之后(虚拟dom之后，实际dom挂载之前) ，以及每次获取新的props之后。
   • 每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state.
   • getDerivedStateFromProps 是react16.3之后新增，在组件实例化后，和接受新的props后被调用。他必须返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。
   • 配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法，之前这里都是使用constructor+componentWillRecieveProps完成相同的功能的
   • 如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。
   • 调用steState()不会触发getDerivedStateFromProps()。
3. getSnapshotBeforeUpdate()
   • 触发时间: 在react render()后的输出被渲染到DOM之前被调用。
   • 配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法。
   • 它使组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。
   •