笔记十三、（新）深入理解React的生命周期

r囧r小猫 2024-05-01 16:23 5阅读 0赞

新版react生命周期函数

![3ff6f463ed494eec98cfbc739b50b730.png][]

对比旧生命周期函数，去除了三个生命周期函数

> componentWillMount  
> componentWillUpdate  
> componentWillReceiveProps

新增了两个生命周期函数

> getDerivedStateFromProps // 当前组件任何时候使用props来决定state
> 
> getSnapshotBeforeUpdate

### 13.1 getDerivedStateFromProps ###

代码及运行结果

运行结果

![4971ed937218499c95c6bbb135800477.png][]

### 13.2 getSnapshotBeforeUpdate ###

> // 获取快照  
> // 必须要配合下面的componentDidUpdate使用，否则报错  
> getSnapshotBeforeUpdate(preProps, preState) \{  
> console.log('getSnapshotBeforeUpdate');  
> console.log("快照props -> ", preProps, "快照state -> ", preState)  
> // return 的值（snapShot value）可以被下面的 componentDidUpdate 方法获取  
> return 'Elendas';  
> \}  
>   
> // 组件更新完成  
> // snapShotValue 用于获取改变之前的值  
> componentDidUpdate(preProps, preState, snapShotValue) \{  
> console.log('componentDidUpdate');  
> console.log('快照props -> ', preProps, '快照state -> ', preState, '当前快照value -> ', snapShotValue)  
> \}

代码及运行结果

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <div id="root"></div>
    <script
            crossorigin
            src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    
    <script
            crossorigin
            src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        class A extends React.Component {
            state = {money: 0};
    
            // 点击操作改变state
            handleClick = () => {
                this.setState({money: this.state.money + 100});
            }
    
            // 直接运行该方法会导致报错 ↓
            // react-dom.development.js:82 Warning: A: getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.
            // 需加上 static 以静态方法声明,而且需要返回值
            // 生命周期函数作用:通过父组件传来的 props 决定 state
            // 当前组件任何时候使用props来决定state
            /*static getDerivedStateFromProps(props, state) {
                console.log('getDerivedStateFromProps ->', props, state);
                // 这个东西，因为最下面，props始终是100，一直不变，那么，返回props的话，props一直不变都是100，那么导致state一直不变
                return props;
            }*/
    
            // 获取快照
            // 必须要配合下面的componentDidUpdate使用，否则报错
            getSnapshotBeforeUpdate(preProps, preState) {
                console.log('getSnapshotBeforeUpdate');
                console.log("快照props -> ", preProps, "快照state -> ", preState)
                // return 的值（snapShot value）可以被下面的 componentDidUpdate 方法获取
                return 'Elendas';
            }
    
            // 组件更新完成
            // snapShotValue 用于获取改变之前的值
            componentDidUpdate(preProps, preState, snapShotValue) {
                console.log('componentDidUpdate');
                console.log('快照props -> ', preProps, '快照state -> ', preState, '当前快照value -> ', snapShotValue)
            }
    
            render() {
                console.log('render')
                return (
                    <div>
                        <div onClick={this.handleClick}>父亲微信转账{this.state.money}元</div>
                    </div>
                )
            }
        }
    
        ReactDOM.render(<A money={100}/>, document.getElementById("root"));
    </script>
    </body>
    </html>

运行结果（点击三次运行结果）

![f833e281ec30408cbcb8a81ef8219573.png][]

[3ff6f463ed494eec98cfbc739b50b730.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/d852300e45984c299ffcc08a8787fa15.png
[4971ed937218499c95c6bbb135800477.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/848338e8d69949cc92b1fd4c0e27579c.png
[f833e281ec30408cbcb8a81ef8219573.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/41f11eb008ad4bad88e871cba686796e.png