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>
相关推荐
trsoliu几秒前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子4 分钟前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖5 分钟前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
良木林7 分钟前
浅谈原型。
开发语言·javascript·原型模式
qq_12498707531 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
袁煦丞1 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_011 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭2 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育2 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo2 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端