解释 React v16.3 中的新生命周期方法

React 16.3 引入了一些重大更新，例如新的 Ref API、生命周期挂钩更改等等。现在，我们将专注于 React 16.3 引入的新生命周期方法。在 React 16.3 中，不鼓励使用三个生命周期方法，即（componentswillReceiveProps()、componentWillUpdate() 和 componentWillMount()）。这些生命周期方法经常被滥用（如状态更新）。因此，这些生命周期正在弃用不安全的生命周期，它们在这些生命周期中添加“UNSAFE_”前缀。不安全意味着这些生命周期可能会给代码带来一些问题。

React 16.3 引入了两种新的生命周期方法：

1. getDerivedStateFromProps()
2. getSnapshotBeforeUpdate()

创建一个反应应用程序：

第 1 步：要创建 React 应用程序，请打开命令提示符并开始编写以下命令：

npx create-react-app name-of-your-folder

第 2 步：执行上述命令后，将使用“name-of-your-folder”名称创建一个文件夹，然后通过以下命令将其移动到该文件夹：

cd name-of-your-folder

项目结构：项目结构将如下所示：

你的反应文件夹的结构

getDerivedStateFromProps()：这个生命周期钩子是一个静态生命周期钩子。每当组件接收到更新的 props 时就会执行它，并且它有机会返回一个对象，该对象此后将成为新的组件状态。它用于使组件道具和状态同步。在更新组件之前调用此方法。

句法：

class ExampleHook extends React.Component {
   static getDerivedStateFromProps(props, state) {
       // statements...
   }
}

通过与 componentDidUpdate 结合，这个新的生命周期应该涵盖旧式 componentWillReceiveProps 的所有用例。

例子：

Javascript

import React, { Component } from "react";
import Student from "./Student";
  
export class App extends Component {
    constructor(props) {
        super(props);
        console.log("APP-Constructor Called");
        console.log(props.name);
        this.state = {
            roll: "101",
        };
    }
    static getDerivedStateFromProps(props, state) {
        console.log("App-Get deriving state from props");
        console.log(props, state);
        return null;
    }
    render() {
        return (
            

                
            
        );
    }
}
  
export default App;

输出：

getSnapshotBeforeUpdate()：这是在组件更新之前执行的，这意味着在你的更改提交到 DOM 之前。调用此方法显示状态的先前值。

句法：

class ExampleHook extends React.Component {
   getSnapshotBeforeUpdate(prevProps, prevState) {
       // statements...
   }
}

通过与 componentDidUpdate 结合，这个新的生命周期应该涵盖旧式 componentWillUpdate 的所有用例。

例子：

Javascript

import React, { Component } from "react";
  
export class App extends Component {
    constructor(props) {
        super(props);
        console.log("APP-Constructor Called");
        console.log(props.name);
        this.state = {
            name: "first",
        };
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({ name: "last" });
        }, 3000);
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        document.getElementById(`prev`).innerHTML = prevState.name;
  
        return prevState.name;
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(snapshot);
        document.getElementById(`current`).innerHTML = this.state.name;
    }
    render() {
        return (
            

                
{this.state.name}
                
{this.state.name}
            
        );
    }
}
  
export default App;

输出：