react17:生命周期函数

react(v17.0.2)的生命周期图谱如下。

相较于16版本,17版本生命周期函数有如下变化:

componentWillMount()

componentWillUpdate()

componentWillReceiveProps()

+getDerivedStateFromProps(props,state)

+getSnapshotBeforeUpdate(prevProps,prevState)

虽然UNSAFE_componentWillMount、UNSAFE_componentWillUpdate、UNSAFE_componentWillReceiveProps当前依然可用,但在react未来的版本中可能被移除,所以尽量避免使用。更多可以访问如下链接:

https://react.docschina.org/docs/react-component.html
https://react.docschina.org/blog/2018/03/27/update-on-async-rendering.html

挂载时

组件挂载时,会依次调用如下生命周期函数:

  1. constructor(props)
  2. static getDerivedStateFromProps(props)
  3. render()
  4. componentDidMount()

其中,getDerivedStateFromProps必须用static修饰,它是类上的方法。且必须返回null或者状态对象(State Obect)。

getDerivedStateFromProps在实际开发中几乎不用,仅适用于state唯一取决于props的场景。

更新时

setState触发更新、父组件重新渲染时触发更新

setState、父组件重新渲染触发更新时,会依次调用如下生命周期函数:

1、static getDerivedStateFromProps()
2、shouldComponentUpdate(nextProps,nextState)
3、render()
4、getSnapshotBeforeUpdate(prevProps,prevState)
5、componentDidUpdate(prevProps,prevState,snapshot)

其中,getSnapshotBeforeUpdate(prevProps,prevState)必须返回null或任意快照值(Snapshot Value,undefined除外)。返回的快照值将作为componentDidUpdate的第三个形参。

forceUpdate触发更新

forceUpdate触发更新,会依次调用以下生命周期函数:

  1. static getDerivedStateFromProps()
  2. render()
  3. getSnapshotBeforeUpdate()
  4. componentDidUpdate()

卸载时

组件卸载时,会调用生命周期函数:

  1. componentWillUnmount()
html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Count extends React.Component{
            constructor(props){
                console.log("Count---constructor");
                super(props);
                this.state = {
                    count:0
                }
            }
            componentDidMount(){
                console.log("Count---componentDidMount");
            }
            static getDerivedStateFromProps(){
                console.log("Count---getDerivedStateFromProps");
                return null;
            }
            shouldComponentUpdate(){
                console.log("Count---shouldComponentUpdate");
                return true;
            }
            getSnapshotBeforeUpdate(){
                console.log("Count---getSnapshotBeforeUpdate");
                return null;
            }
            componentDidUpdate(){
                console.log("Count---componentDidUpdate");
            }
            componentWillUnmount(){
                console.log("Count---componentWillUnmount");
            }

            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById("app"));
            }
            add = () => {
                const {count} = this.state;
                this.setState({
                    count:count+1
                })
            }
            force = () => {
                this.forceUpdate();
            }

            render(){
                console.log("Count---render");
                const {count} = this.state;
                const {add,death,force} = this;

                return (
                    <div>
                        <h2>当前值为:{count}</h2>
                        <button onClick={add}>点我加1</button>&nbsp;
                        <button onClick={force}>强制更新</button>&nbsp;
                        <button onClick={death}>卸载组件</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Count/>,document.getElementById("app"));
    </script>
</body>

</html>
相关推荐
江城开朗的豌豆5 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er13 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子14 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆19 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山27 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45336 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^37 分钟前
条件渲染 v-show与v-if
前端