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>
相关推荐
F-2H1 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
gqkmiss1 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247553 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255024 小时前
前端常用算法集合
前端·算法
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2345 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1235 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~6 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语6 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js