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>
相关推荐
weixin-a1530030831622 分钟前
vue疑难解答
前端·javascript·vue.js
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird6 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者7 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强7 小时前
Chrome和IE获取本机ip地址
前端
天***88967 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*7 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v8 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls8 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友8 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全