ReactJS - 静态 getDerivedStateFromProps() 方法

更新于 2025/3/24 8:52:17

React 是一个用于创建用户界面的著名 JavaScript 库。React 中有一个名为 getDerivedStateFromProps 的方法，看起来很复杂，但让我们将其分解成简单的词语。

在 React 中，getDerivedStateFromProps 方法在组件渲染之前被调用，无论是首次出现时还是更新时。其目标是找出组件的状态是否需要更改以响应其 props 的变化。

语法

static getDerivedStateFromProps(props, state)

参数

props −组件将要渲染的下一组 props。
state − 组件即将渲染的状态。

返回值

如果需要更新状态，则应返回一个对象;否则，应返回 null。

示例

示例 1

让我们使用 getDerivedStateFromProps 函数创建一个简单的 React 应用。在此示例中，我们将创建一个表单，当用户 ID 更改时，该表单会自动刷新电子邮件地址。

import React, { Component } from 'react';

class Form extends Component {
   state = {
      email: this.props.defaultEmail,
      prevUserID: this.props.userID
   };   
   static getDerivedStateFromProps(props, state) {
      if (props.userID !== state.prevUserID) {
         return {
            prevUserID: props.userID,
            email: props.defaultEmail
         };
      }
      return null;
   }   
   handleUserIDChange = (e) => {
      
      // 模拟用户 ID 更改
      this.props.onUserIDChange(e.target.value);
   };
   
   handleEmailChange = (e) => {
      this.setState({ email: e.target.value });
   };
   
   render() {
      return (
         <div>
            <label>
               User ID:
               <input type="text" value={this.props.userID} onChange={this.handleUserIDChange} />
            </label>
            <br />
            <label>
               Email:
               <input type="text" value={this.state.email} onChange={this.handleEmailChange} />
            </label>
         </div>
      );
   }
}

class App extends Component {
   state = {
      userID: '123',
      defaultEmail: 'user@example.com'
   };
   
   handleUserIDChange = (newUserID) => {
      this.setState({ userID: newUserID });
   };
   
   render() {
      return (
         <div>
            <h1>Form App</h1>
            <Form
               userID={this.state.userID}
               defaultEmail={this.state.defaultEmail}
               onUserIDChange={this.handleUserIDChange}
            />
         </div>
      );
   }
}

export default App;

输出

在上面的例子中，Form 组件有一个用户 ID 和一个电子邮件输入。当用户 ID 更改时，getDerivedStateFromProps 函数会重置电子邮件。函数 handleUserIDChange 模拟用户 ID 更改。App 组件设置 Form 并管理对用户 ID 的更改。这是一个基本示例，我们可以对其进行更改以满足我们的特定要求。

示例 2

现在我们将创建一个简单的计数器应用程序，其中初始计数作为参数给出，计数器可以递增。当 prop 更改时，将调用 getDerivedStateFromProps 函数来更新状态。

import React, { Component } from 'react';
import './App.css';

class Counter extends Component {
   state = {
      count: this.props.initialCount,
   };
   
   static getDerivedStateFromProps(props, state) {
      // 检查初始 count prop 是否已改变
      if (props.initialCount !== state.count) {
         // 使用新的初始计数更新状态
         return {
            count: props.initialCount,
         };
      }
      return null;
   }
   
   handleIncrement = () => {
      this.setState((prevState) => ({
         count: prevState.count + 1,
      }));
   };
   
   render() {
      return (
         <div>
            <p>Count: {this.state.count}</p>
            <button onClick={this.handleIncrement}>Increment</button>
         </div>
      );
   }
}

class App extends Component {
   state = {
      initialCount: 0,
   };
   
   handleInitialCountChange = (e) => {
      const newInitialCount = parseInt(e.target.value, 10);
      this.setState({ initialCount: newInitialCount });
   };
   
   render() {
      return (
         <div className='App'>
            <h1>Counter App</h1>
            <label>
               Initial Count:
               <input
                  type="number"
                  value={this.state.initialCount}
                  onChange={this.handleInitialCountChange}
               />
            </label>
            <Counter initialCount={this.state.initialCount} />
         </div>
      );
   }
}

export default App;

输出

现在，我们有一个简单的 React 应用，其中计数器根据初始计数 prop 进行更新，并且 getDerivedStateFromProps 方法用于处理 prop 更改。

示例 3

让我们创建一个简单的 React 应用，该应用使用生命周期方法 getDerivedStateFromProps 根据用户是否已登录显示一条消息。因此，运行应用后，我们将能够看到用户已登录或已注销的消息。

import React, { Component } from 'react';
import './App.css';

class LoginStatus extends Component {
   static getDerivedStateFromProps(props, state) {
      // 检查用户是否已登录
      const isLoggedIn = props.isLoggedIn;
      // 根据登录状态显示不同的消息
      return {
         statusMessage: isLoggedIn ? 'Welcome back! You are logged in.' : 'Please log in.'
      };
   }
   
   render() {
      return (
         <div>
            <p>{this.state.statusMessage}</p>
         </div>
      );
   }
}

class App extends Component {
   state = {
      isLoggedIn: false
   };
   
   handleLoginToggle = () => {
      this.setState((prevState) => ({
         isLoggedIn: !prevState.isLoggedIn
      }));
   };
   
   render() {
      return (
         <div className='App'>
            <h1>Login App</h1>
            <button onClick={this.handleLoginToggle}>
            {this.state.isLoggedIn ? 'Logout' : 'Login'}
            </button>
            <LoginStatus isLoggedIn={this.state.isLoggedIn} />
         </div>
      );
   }
}

export default App;