React.js 静态 getDerivedStateFromProps()

getDerivedStateFromProps() 方法在组件的状态依赖于 props 的变化时使用。

getDerivedStateFromProps(props, state) 是一个静态方法，它在 React 的挂载和更新阶段中的 render() 方法之前被调用。它以更新的道具和当前状态作为参数。

我们必须返回一个对象来更新状态，或者返回 null 表示没有任何变化。

创建反应应用程序：

• 第 1 步：使用以下命令创建一个 React 应用程序：

  npx create-react-app foldername

• 第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

  cd foldername

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

App.js

import React from 'react';
import ReactDOM from 'react-dom';
  
class App extends React.Component {
  
  render() {
  
    return (
      

      
      
    )
  }
}
  
class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        name: "kapil"
        };
    }
    static getDerivedStateFromProps(props, state) {
        if(props.name !== state.name){
            //Change in props
            return{
                name: props.name
            };
        }
        return null; // No change to state
    }
    /* if props changes then after getDerivedStateFromProps
       method, state will look something like 
  
    {
        name: props.name
    }
    */
    render(){
       return (
        
 My name is {this.state.name }
       )
    }
}
                      
export default App;

如果 props 发生变化，那么状态也会随之变化，否则 getDerivedStateFromProps 将返回 null，表示状态没有变化。在上面的示例中，props 有一个名为 name 的属性，但 state 的该属性具有不同的值。所以状态会根据 props 属性的值而改变。

输出：

参考： https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops