React：四、生命周期

最新推荐文章于 2024-09-30 18:55:14 发布
最新推荐文章于 2024-09-30 18:55:14 发布
阅读量145 收藏
点赞数
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a232884c/article/details/125226949
版权

React：四、生命周期

1.前言

引出生命周期：需要在页面进入后就主动调函数进行一定操作

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        // 生命周期回调函数=》生命周期钩子函数=》生命周期函数=》生命周期钩子
        class Life extends React.Component{
            state = {opacity:1}
            change = ()=>{
                // 卸载组件
                ReactDOM.unmountComponentAtNode(document.getElementById('app'))
            }

            // 组件挂载完毕
            componentDidMount(){
                // 定时器不要放在render中，因为render是1+n次更新，n指的每次
                //  state更新就会执行render，如果定时器放在render中，每次更新state
                // 就会增加定时器，会导致构建出无穷多定时器
                this.timer = setInterval(()=>{
                    let {opacity}  = this.state;
                    opacity-=0.1
                    if(opacity<=0){
                        opacity=1
                    }
                    this.setState({opacity})
                },200);
            }

            //组件将要卸载 
            componentWillUnmount(){
                // 清除定时器
                // 如果组件卸载了，但是state还在通过定时器更新，那么有错误，
                // 需要注意卸载组件时，也应该删除定时器
                clearInterval(this.timer)
            }

            render(){
                return (
                    <div>
                        <h2 style={{opacity:this.state.opacity}}>今天是网抑云日子</h2>
                        <button onClick= {this.change} >点我呀老哥</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Life/>,document.getElementById('app'))
    </script>
</body>
</html>

点击按钮即可卸载组件
在这里插入图片描述
2 旧生命周期

组件挂载流程：

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class OldLife extends React.Component{
            constructor(props){
                console.log("old:constructor")
                super(props)
                this.state = {count:0}
            }
            componentDidMount(){
                console.log("old:componentDidMount")
            }
            componentWillMount(){
                console.log("old:componentWillMount")
            }
            add = ()=>{
                const {count} = this.state
                this.setState({count:count+1})
            }
            render(){
                console.log("old:render")
                const {count} = this.state
                return (
                    <div>
                        <h2>求和开始：{count}</h2>
                        <button onClick = {this.add}>点我加1</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<OldLife/>,document.getElementById('app'))
    </script>
</body>
</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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class OldLife extends React.Component{
            constructor(props){
                console.log("old:constructor")
                super(props)
                this.state = {count:0}
            }
            componentDidMount(){
                console.log("old:componentDidMount")
            }
            componentWillMount(){
                console.log("old:componentWillMount")
            }
            add = ()=>{
                const {count} = this.state
                this.setState({count:count+1})
            }

            // 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log("old:shouldComponentUpdate")
                // return false将不会更新页面
                return true;
            }

            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("old:componentDidUpdate")
            }

            render(){
                console.log("old:render")
                const {count} = this.state
                return (
                    <div>
                        <h2>求和开始：{count}</h2>
                        <button onClick = {this.add}>点我加1</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<OldLife/>,document.getElementById('app'))
    </script>
</body>
</html>

初始化及点击+1更新后：
在这里插入图片描述
2.1 强制更新

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class OldLife extends React.Component{

            constructor(props){
                console.log("old:constructor")
                super(props)
                this.state = {count:0}
            }

            componentDidMount(){
                console.log("old:componentDidMount")
            }

            componentWillMount(){
                console.log("old:componentWillMount")
            }

            add = ()=>{
                const {count} = this.state
                this.setState({count:count+1})
            }

            // 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log("old:shouldComponentUpdate")
                // return false将不会更新页面
                return false;
            }

            componentWillUpdate(){
                console.log("old:componentWillUpdate")
            }

            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("old:componentDidUpdate")
            }

            // 强制更新按钮,关闭shouldComponentUpdate阀门也能更新
            force = ()=>{
                console.log("强制更新")
                this.forceUpdate()
            }

            render(){
                console.log("old:render")
                const {count} = this.state
                return (
                    <div>
                        <h2>求和开始：{count}</h2>
                        <button onClick = {this.add}>点我加1</button>
                        <button onClick = {this.force}>不更改任何状态中数据，强制更新一下</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<OldLife/>,document.getElementById('app'))
    </script>
</body>
</html>

关闭可更新的阀门，执行强制更新：

在这里插入图片描述
2.2 componentWillReceiveProps

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        class A extends React.Component{
            state = {name:"初始心情"}
            change = ()=>{
                this.setState({name:"快乐心情"});
            }
            render(){

                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick= {this.change}>换心情</button>
                        <B xin = {this.state.name}/>
                    </div>
                )
            }
        }

        class B extends React.Component{
            // 第一次不会调，在父组件A更新state执行render时，B组件在A组件中，也会重新调用B组件的render，这时
            // B组件会接收新的父组件传的props，此时会调用componentWillReceiveProps

            // 组件将要接收新的props的钩子
            componentWillReceiveProps(props){
                console.log("我是B的componentWillReceiveProps:",props)
            }

            // 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log("old:shouldComponentUpdate")
                // return false将不会更新页面
                return true;
            }
            componentWillUpdate(){
                console.log("old:componentWillUpdate")
            }            
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("old:componentDidUpdate")
            }
            render(){
                console.log("B组件--render")
                return (
                    <div>
                        我是B组件，我的心情是：{this.props.xin}
                    </div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById('app'))
    </script>
</body>
</html>

如下：
在这里插入图片描述
2.3 旧生命周期总结

 /* 
 1.初始化阶段：
 由ReactDOM.render()触发--初次渲染
 1.1 constructor  1.2 componentWillMount 1.3 render  1.4 componentDidMount==》
 常用，一般在钩子中做初始化操作，例如：开启定时器，发送网络请求，订阅消息

 2.更新阶段：
 由组件内部this.setState()或父组件render()触发
 2.1 shouldComponentUpdate  2.2 componentWillUpdate  2.3  render==》必须使用的钩子
 2.4 componentDidUpdate

 3.卸载组件，由ReactDOM.unmountComponentAtNode()触发：
 3.1 componentWillUnmount==》一般在钩子中做收尾的事，例如：关闭定时器，取消订阅消息等

 */

3 新生命周期

3.1 新旧生命周期对比

在react17版本里，需更新为UNSAFE_componentWillUpdate、UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps，不会编译报警，componentWillUnmount不需更改：

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /* 
        1.初始化阶段：
        由ReactDOM.render()触发--初次渲染
        1.1 constructor  1.2 componentWillMount 1.3 render  1.4 componentDidMount==》
        常用，一般在钩子中做初始化操作，例如：开启定时器，发送网络请求，订阅消息

        2.更新阶段：
        由组件内部this.setState()或父组件render()触发
        2.1 shouldComponentUpdate  2.2 componentWillUpdate  2.3  render==》必须使用的钩子
        2.4 componentDidUpdate

        3.卸载组件，由ReactDOM.unmountComponentAtNode()触发：
        3.1 componentWillUnmount==》一般在钩子中做收尾的事，例如：关闭定时器，取消订阅消息等


        */
        class A extends React.Component{
            state = {name:"初始心情"}
            change = ()=>{
                this.setState({name:"快乐心情"});
            }
            render(){

                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick= {this.change}>换心情</button>
                        <B xin = {this.state.name}/>
                    </div>
                )
            }
        }

        class B extends React.Component{
            // 第一次不会调，在父组件A更新state执行render时，B组件在A组件中，也会重新调用B组件的render，这时
            // B组件会接收新的父组件传的props，此时会调用componentWillReceiveProps

            // 组件将要接收新的props的钩子
            UNSAFE_componentWillReceiveProps(props){
                console.log("我是B的componentWillReceiveProps:",props)
            }

            // 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log("new:shouldComponentUpdate")
                // return false将不会更新页面
                return true;
            }
            UNSAFE_componentWillUpdate(){
                console.log("new:componentWillUpdate")
            }            
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("new:componentDidUpdate")
            }

            componentDidMount(){
                console.log("new:componentDidMount")
            }

            UNSAFE_componentWillMount(){
                console.log("new:componentWillMount")
            }

            render(){
                console.log("B组件--render")
                return (
                    <div>
                        我是B组件，我的心情是：{this.props.xin}
                    </div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById('app'))
    </script>
</body>
</html>

如下：
在这里插入图片描述
废弃如上三个钩子，新增了两个钩子：getDerivedStateFromProps、getSnapshotBeforeUpdate

3.2 getDerivedStateFromProps：derived衍生的

组件中有初始的state，且getDerivedStateFromProps中写死，那么一直不会更改（不会按照初始的B组件的state的xin：B初始心情来渲染）
getDerivedStateFromProps接入constructor和shouldComponentUpdate之间：

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /* 
        1.初始化阶段：
        由ReactDOM.render()触发--初次渲染
        1.1 constructor  1.2 componentWillMount 1.3 render  1.4 componentDidMount==》
        常用，一般在钩子中做初始化操作，例如：开启定时器，发送网络请求，订阅消息

        2.更新阶段：
        由组件内部this.setState()或父组件render()触发
        2.1 shouldComponentUpdate  2.2 componentWillUpdate  2.3  render==》必须使用的钩子
        2.4 componentDidUpdate

        3.卸载组件，由ReactDOM.unmountComponentAtNode()触发：
        3.1 componentWillUnmount==》一般在钩子中做收尾的事，例如：关闭定时器，取消订阅消息等


        */
        class A extends React.Component{
            state = {name:"初始心情"}
            change = ()=>{
                this.setState({name:"快乐心情"});
            }
            render(){

                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick= {this.change}>换心情</button>
                        <B xin = {this.state.name}/>
                    </div>
                )
            }
        }

        class B extends React.Component{
            // 第一次不会调，在父组件A更新state执行render时，B组件在A组件中，也会重新调用B组件的render，这时
            // B组件会接收新的父组件传的props，此时会调用componentWillReceiveProps

            // 组件将要接收新的props的钩子
            // UNSAFE_componentWillReceiveProps(props){
            //     console.log("我是B的componentWillReceiveProps:",props)
            // }
            
            state = {xin:"B初始心情"}

            constructor(props){
                super(props)
                console.log("new:constructor")
            }

            // 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log("new:shouldComponentUpdate")
                // return false将不会更新页面
                return true;
            }
         
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("new:componentDidUpdate")
            }

            componentDidMount(){
                console.log("new:componentDidMount")
            }

            static getDerivedStateFromProps(){
                console.log("new:getDerivedStateFromProps")
                return {xin:"我不改啦"}
            }

            render(){
                console.log("B组件--render")
                return (
                    <div>
                        我是B组件，我原本心情是：{this.state.xin}，我的心情是：{this.props.xin}
                    </div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById('app'))
    </script>
</body>
</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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /* 
        1.初始化阶段：
        由ReactDOM.render()触发--初次渲染
        1.1 constructor  1.2 componentWillMount 1.3 render  1.4 componentDidMount==》
        常用，一般在钩子中做初始化操作，例如：开启定时器，发送网络请求，订阅消息

        2.更新阶段：
        由组件内部this.setState()或父组件render()触发
        2.1 shouldComponentUpdate  2.2 componentWillUpdate  2.3  render==》必须使用的钩子
        2.4 componentDidUpdate

        3.卸载组件，由ReactDOM.unmountComponentAtNode()触发：
        3.1 componentWillUnmount==》一般在钩子中做收尾的事，例如：关闭定时器，取消订阅消息等


        */
        class A extends React.Component{
            state = {name:"初始心情"}
            change = ()=>{
                this.setState({name:"快乐心情"});
            }
            render(){

                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick= {this.change}>换心情</button>
                        <B xin = {this.state.name}/>
                    </div>
                )
            }
        }

        class B extends React.Component{
            // 第一次不会调，在父组件A更新state执行render时，B组件在A组件中，也会重新调用B组件的render，这时
            // B组件会接收新的父组件传的props，此时会调用componentWillReceiveProps

            // 组件将要接收新的props的钩子
            // UNSAFE_componentWillReceiveProps(props){
            //     console.log("我是B的componentWillReceiveProps:",props)
            // }
            
            state = {xin:"B初始心情"}

            constructor(props){
                super(props)
                console.log("new:constructor")
            }

            // 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log("new:shouldComponentUpdate")
                // return false将不会更新页面
                return true;
            }
         
            // 组件更新完毕的钩子
            componentDidUpdate(){
                console.log("new:componentDidUpdate")
            }

            componentDidMount(){
                console.log("new:componentDidMount")
            }

            static getDerivedStateFromProps(props){
                console.log("new:getDerivedStateFromProps")
                return props
            }

            render(){
                console.log("B组件--render")
                return (
                    <div>
                        我是B组件，我原本心情是：{this.state.xin}，我的心情是：{this.props.xin}
                    </div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById('app'))
    </script>
</body>
</html>

如下，初始渲染B组件就调用了getDerivedStateFromProps：
在这里插入图片描述
然后点击换心情：
在这里插入图片描述
特殊：当state的值任何时候均取决于props的值时，可以加上getDerivedStateFromProps方法。

可以增加第二个参数state，为B组件初始的state值：
在这里插入图片描述
在这里插入图片描述
因为getDerivedStateFromProps在挂载和更新之前执行，所以均会拦截初始加载页面和更新页面的全部场景。

3.3 getSnapshotBeforeUpdate

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        /* 
        1.初始化阶段：
        由ReactDOM.render()触发--初次渲染
        1.1 constructor  1.2 componentWillMount 1.3 render  1.4 componentDidMount==》
        常用，一般在钩子中做初始化操作，例如：开启定时器，发送网络请求，订阅消息

        2.更新阶段：
        由组件内部this.setState()或父组件render()触发
        2.1 shouldComponentUpdate  2.2 componentWillUpdate  2.3  render==》必须使用的钩子
        2.4 componentDidUpdate

        3.卸载组件，由ReactDOM.unmountComponentAtNode()触发：
        3.1 componentWillUnmount==》一般在钩子中做收尾的事，例如：关闭定时器，取消订阅消息等


        */
        class A extends React.Component{
            state = {name:"初始心情"}
            change = ()=>{
                this.setState({name:"快乐心情"});
            }
            render(){

                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick= {this.change}>换心情</button>
                        <B xin = {this.state.name}/>
                    </div>
                )
            }
        }

        class B extends React.Component{
            // 第一次不会调，在父组件A更新state执行render时，B组件在A组件中，也会重新调用B组件的render，这时
            // B组件会接收新的父组件传的props，此时会调用componentWillReceiveProps

            // 组件将要接收新的props的钩子
            // UNSAFE_componentWillReceiveProps(props){
            //     console.log("我是B的componentWillReceiveProps:",props)
            // }
            
            state = {xin:"B初始心情"}

            constructor(props){
                super(props)
                console.log("new:constructor")
            }

            // 控制组件更新的阀门
            shouldComponentUpdate(){
                console.log("new:shouldComponentUpdate")
                // return false将不会更新页面
                return true;
            }

            componentDidMount(){
                console.log("new:componentDidMount")
            }

            static getDerivedStateFromProps(props,state){
                console.log("new:getDerivedStateFromProps",props,state)
                return null
            }

            // 组件更新完毕的钩子
            componentDidUpdate(preProps,preState,snapShot){
                console.log("new:componentDidUpdate",preProps,preState,snapShot)
            }

            // 返回值作为参数传给componentDidUpdate,更新时，先调render，再就是getSnapshotBeforeUpdate，最后是componentDidUpdate
            // 更新之前返回快照值
            getSnapshotBeforeUpdate(){
                console.log("new:getSnapshotBeforeUpdate")
                // 快照返回值可以是字符串、对象等等，均可
                return null
            }

            render(){
                console.log("B组件--render")
                return (
                    <div>
                        我是B组件，我原本心情是：{this.state.xin}，我的心情是：{this.props.xin}
                    </div>
                )
            }
        }
        ReactDOM.render(<A/>,document.getElementById('app'))
    </script>
</body>
</html>

初始：
在这里插入图片描述
点击换心情：
在这里插入图片描述
3.4 getSnapshotBeforeUpdate使用举栗

<!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>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src = "../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>

    <style>
        .list{
            width: 200px;
            height: 150px;
            background-color: blueviolet;
            overflow: auto;
        }
        .news{
            height: 29px;
            border-bottom: 1px solid red;
        }
    </style>
</head>
<body>
    <div id ="test">  
    </div>
    <script type="text/babel">
        class Xiaoxu extends React.Component{
            state = {nArr:[]}
            componentDidMount(){
                setInterval(() => {
                    const {nArr} = this.state
                    const news = "小徐"+(nArr.length+1)
                    this.setState({nArr:[news,...nArr]})
                }, 3000);
            }
            getSnapshotBeforeUpdate(){
                return this.refs.listw.scrollHeight
            }
            componentDidUpdate(preProps,preState,snapValue){
                console.log(snapValue)
                this.refs.listw.scrollTop += this.refs.listw.scrollHeight-snapValue
            }
            render(){
                return (
                    <div className="list" ref = "listw">
                       {
                        this.state.nArr.map((x,index)=>{
                            return <div className="news" key={index}>{x}</div>
                        })
                       }
                    </div>
                )
            }
        }
        ReactDOM.render(<Xiaoxu/>,document.getElementById("test"))
    </script>
</body>
</html>

虽然一直在滚动，但是鼠标拉动的地方不会被不断增加的顶掉：
在这里插入图片描述
3.5 新生命周期总结

/* 
1.初始化阶段：
由ReactDOM.render()触发--初次渲染
1.1 constructor  1.2 getDerivedStateFromProps 1.3 render  1.4 componentDidMount==》
常用，一般在钩子中做初始化操作，例如：开启定时器，发送网络请求，订阅消息

2.更新阶段：
由组件内部this.setState()或父组件render()触发
2.1 getDerivedStateFromProps  2.2 shouldComponentUpdate  2.3  render==》必须使用的钩子
2.4 getSnapshotBeforeUpdate 2.5 componentDidUpdate

3.卸载组件，由ReactDOM.unmountComponentAtNode()触发：
3.1 componentWillUnmount==》一般在钩子中做收尾的事，例如：关闭定时器，取消订阅消息等
*/
小徐也要努力鸭
关注
专栏目录
React组件卸载、路由跳转、页面关闭（刷新）之前进行提示
weixin_34327223的博客
01-16 1万+
React组件卸载生命周期、路由跳转和页面关闭三者看起来有些类似的地方，比如都是当前组件即将从视口消失，但实际上所触发的事件均不相同。以一个实际案例出发： 某单页应用的文章编辑页用户正在编辑文章，此时尚未保存。当用户不小心要跳转到另外一个路由时需要提醒用户是否继续跳转，这个过程需要触发路由跳转以及组件卸载； 而用户不小心点了关闭标签页按钮...
React的生命周期 和 页面优化
weixin_40719714的博客
06-21 1471
React的生命周期 和 页面优化 先上React的生命周期图 页面优化问题在 shouldComponentUpdate 函数那里写的（有颜色备注） React声明周期的四个大阶段： Initialization:初始化阶段。 Mounting: 挂在阶段。 Updation: 更新阶段。 Unmounting: 销毁阶段。 什么是生命周期函数 用大神 技术胖 来说就是 生命周期函数指在...
一个关于React.Component.setState的问题
weixin_34247299的博客
05-07 456
React组件重新渲染的条件是： B.只要调用this.setState()就会发生重新渲染。 C.必须调用this.setState()且传递不同于当前this.setState()的参数，才会引发重新渲染。 本文将从三方面说明这个问题为什么选择C。或者说为什么 setState 在传递不同当前 this.State 的参数，才会引发组...
react之旅（八）React生命周期
letianxf的博客
07-24 1087
一、react 16前的生命周期 1.1 constructor constructor(props, context) 如果想(在组件其他地方是可以直接接收的)使用props或context，则需要以参数形式传入。 只要组件存在constructor,就必要要写super,否则this指向会错误 1.2 componentWillMount componentWillMount () 在组件挂载之前调用，且全局只调用一次。如果在这个钩子里可以setState，render后可以看到更新后的st
React 生命周期详解（新）
z止于至善的博客
05-15 3万+
React 16之后有三个生命周期被废弃： componentWillMount componentWillReceiveProps componentWillUpdate 因为这些生命周期方法容易被误解和滥用。 React 16.8+的生命周期分为三个阶段，分别是挂载阶段、更新阶段、卸载阶段。 挂载阶段 constructor: 构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this getDerivedStateFromProps: static getDeri
React 生命周期详解与示例
热门推荐
聚焦于深度解析最新的编程语言特性、框架升级、架构设计、开发工具和最佳实践，涵盖Web前端（如Vue3, React, Angular等）、后端开发（如Node.js, Java, Python等）、移动端开发（iOS, Android原生及跨平台开发）
04-07 8万+
了解并正确使用React的生命周期，对于构建稳定、可维护的React应用具有重要意义。在实际开发中，我们需要根据需求合理选择生命周期方法，并在合适的时机执行相应的操作。同时，我们还需要注意React版本的变化，因为不同版本的React可能会对生命周期方法进行一些调整。
react17：生命周期函数
richest_qi的博客
04-13 1215
文章目录挂载时更新时setState触发更新forceUpdate触发更新父组件重新render触发更新卸载时 react（v17.0.2）的生命周期图谱如下。 相较于16版本，17版本生命周期函数有如下变化： componentWillMount() componentWillUpdate() componentWillReceiveProps() +getDerivedStateFromProps(props,state) +getSnapshotBeforeUpdate(prevProps,pre
React 组件的生命周期方法
My_wife_QBL的博客
08-04 1179
挂载（Mounting）：组件被创建并插入到 DOM 中。更新（Updating）：组件的状态或属性发生变化，导致组件重新渲染。卸载（Unmounting）：组件从 DOM 中删除。在每个阶段，React 提供了一些特定的生命周期方法，开发者可以在这些方法中执行自定义逻辑。React 组件的生命周期方法是控制组件行为的重要工具。了解这些方法的调用顺序以及如何在每个阶段执行特定操作，可以帮助开发者编写更加高效和可维护的代码。
React18 生命周期
猫老板的豆
09-02 1019
文章目录生命周期顺序Mounting 挂载顺序Updation 更新顺序Unmounting 卸载注意生命周期1. constuctor2. componentWillMount（废弃）3. static getDerivedStateFromProps（新增）4. render5. componentDidMount版本迁移 在17版本中 废除的生命周期有：componentWillMount，componentwillReceiveProps，componentWillUpdate 新增的生命周期
React组件的生命周期函数
m0_71485750的博客
09-25 1万+
注意这个不常用不是我说的, 实在React官网中, 官方列举的。
react-hooks-lifecycle:life:hourglass_not_done:React生命周期挂钩图
05-26
React Hooks生命周期图 :atom_symbol: :hourglass_not_done: :timer_clock: 功能组件生命周期说明 我根据（以及后来的React）绘制了这张图，该关于现在的“旧”产品的生命周期 :old_man: 类组件。 我想有一张完全像...
React组件的生命周期
07-20
React组件的生命周期
vue生命周期和react生命周期对比【推荐】
10-18
本文将深入探讨Vue和React的生命周期函数，并进行对比分析。 首先，Vue.js的生命周期可以分为八个阶段：创建前beforeCreate、创建created、载入前beforeMount、载入mounted、更新前beforeUpdate、更新***d、销毁前...
react 生命周期实例分析
10-15
React生命周期是指React组件在其创建、渲染、更新和销毁过程中经历的一系列方法调用。这些方法提供了在特定阶段插入自定义逻辑的机会，使得我们可以更好地控制组件的行为。本文将深入探讨React组件的生命周期，通过...
React:新旧生命周期及其对比
Continue的博客
07-09 638
文章目录概述生命周期（旧）挂载时更新时父组件rendersetStateforceUpdate卸载时生命周期（新）挂载时更新时卸载时新旧生命周期的对比 概述 不管是vue还是React，它都有一个生命周期，它描述了组件从创建到销毁的整个生命过程，其中含有有很多的钩子函数连接而成。这里主要讲React新旧生命周期，以及他们的对比 生命周期（旧） 周期图如下 其中左边是挂载时，右边是更新时，下边是更新时 挂载时 可以看出挂载时的更新数据顺序依次如下 1）constructor：构造器 2）component
React&JSX使用
CherishTaoTao的博客
09-30 1122
在 React 开发中，除了 JSX 的基础使用，还有一些常见的注意事项和 JSX 的进阶用法。以下是需要重点注意的 React 开发技巧和。
react-问卷星项目（2）
BHDDGT的博客
09-29 1097
一个git hook 工具，即在git commit之前执行自定义的命令，将规范流程化，如执行代码风格的检查，避免提交非规范的代码，在github搜索即可。这两条是接着执行的，表示创建husky，在文档说明里也有，我按照视频里的指令执行会显示初始化失败，这两条我自己用的没问题。
从0学习React（4）---更新组件状态setState
qq_54432917的博客
09-29 526
在上篇文章中，我们讲了React中的一些基础，包括组件的种类以及state的使用。上篇文章的结尾，我们讲到了如何更新组件的状态（使用setState）。但是我没有讲的很详细，这篇文章我们详细的讲一下React中如何更新组件的状态。
React响应式修改数组和对象
最新发布
警警的博客
09-30 775
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
深入理解React生命周期与优化
"React生命周期的理解" React作为一款流行的JavaScript库，用于构建用户界面，其核心概念之一就是组件的生命周期。生命周期方法允许开发者在组件的不同阶段执行特定的操作，从而实现对组件行为的精确控制。本文将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值