React生命周期（好玩的讲解方式）

React生命周期

旧生命周期

 

挂载生命周期

执行流程：constructor -> componentWillMount -> render -> componentDidMount -> componentWillUnmount

• mount：挂载

• unmount：卸载

• render其实是对组件进行了挂载

 

生命周期API

• constructor

• componentWillMount

• render

• componentDidMount

• componentWillUnmount

 

拓展：组件卸载的API

ReactDOM.unmountComponentAtNode(document.getElementById('test'))

 

更新生命周期

第一条路：setState（）

前言：如果一个组件在状态更新了，那么程序会自动让他们执行render来对组件的状态进行更新

但是这个过程中涉及到了 ”我能不能更新“ -> "我准备更新了" -> "我在更新" -> "我更新完啦"

 

• shouldComponentUpdate（我能不能更新）

功能：控制组件更新的"阀门",是否允许被更新，通过这个生命函数来对状态的更新进行拦截，程序默认是true（也就是允许更新），可以自定义变成false

• componentWillUpdate：我准备更新啦

• render（我正在更新哦）

• componentDidUpdate（我完成更新啦）

 

第二条路：forceUpdate

也就是状态不改变,但是还是要组件进行更新,也就是不经过"阀门"

该方法是直接挂载到了this身上的，直接通过 this.forceUpdate 来调用

（和state一样，都是可以直接通过this来直接访问到）

 

 

第三条路：componentWillReceiveProps

什么场景下触发？

主要是父组件给子组件传递参数props的时候进行触发，该API主要是在子组件中触发，

componentWillReceiveProps(props) {
    console.log('b-componentWillReceiveProps',props)
}

• 有一个形式参数：props，自动就接收到父组件传递过来的参数了

• 注意点：首次子组件接收到props并展示到UI中的时候，该API是不会触发的

 

 

新生命函数

 

拓展：新版本和旧版本的区别：

1、废弃了三个钩子：全部的有Will的钩子，除了componentWillUnmount，其他都要在旧版本的基础上添加 UNSAFE_XXX

UNSAFE_componentWillUpdate

UNSAFE_componentWillMount

UNSAFE_componentWillReceiveProps

原因：componentWillUnmount、componentDidMount、render是最重要的三个

官方文档：由于react后面会发展异步渲染，上面的这三个由于经常被误解和滥用，所以如果在异步渲染中的话，它们三个潜在的误用问题

可能更大，所以在新版本中为这三个生命周期添加了“UNSAFE_"前缀，unsafe并不是指安全性，而是希望使用这些生命周期在

代码中在React未来版本中可能会出现bug，尤其是在异步渲染之后

当下：其实在真正开发的时候用它们的机会其实并不多

 

2、提出了两个新的钩子：getDerivedStateFromProps、getSnapshotBeforeUpdate

 

• getDerivedStateFromProps的介绍

使用情况：如果state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps

接收两个参数：props和state

 

• getSnapshotBeforeUpdate的介绍

官方文档：在最近一次渲染输出（提交到DOM节点）之前调用。它使得组件能在发生更改之前从DOM中捕获一些信息

例如 滚动位置，此生命周期的任何返回值将作为参数传递给componentDidUpdate

快照：就是记录历史的状态

在更新之前获取快照（有用，但是应用场景并不常见）

 

一个好玩的应用就是：一个一直更新的列表，但是可以让用户保持当前item的位置，不会因为列表更新了，item被挤下去