ReactJS - static getDerivedStateFromProps() 方法

---

---

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) => {
      
      // Simulate user ID change
      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) {
      // Check if the initial count prop has changed
      if (props.initialCount !== state.count) {
         // Update the state with the new initial 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 應用程式，其中計數器根據初始 count prop 更新，並且 getDerivedStateFromProps 方法用於處理 prop 更改。

示例 3

讓我們建立一個簡單的 React 應用程式，該應用程式使用生命週期方法 getDerivedStateFromProps 根據使用者是否登入來顯示訊息。因此，在執行應用程式後，我們將能夠看到使用者已登入或已登出的訊息。

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

class LoginStatus extends Component {
   static getDerivedStateFromProps(props, state) {
      // Check if the user is logged in
      const isLoggedIn = props.isLoggedIn;
      // Display different messages as per the login status
      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;

輸出

在上面的應用程式中，我們使用了 getDerivedStateFromProps() 方法來檢查使用者的登入和登出狀態。正如我們在上面的輸出中看到的，當我們單擊該按鈕時，螢幕上會顯示一個按鈕，它將顯示訊息“歡迎回來！您已登入。”並且按鈕更改為登出。

侷限性

• 與以前的 UNSAFE_componentWillReceiveProps 不同，它在每次渲染時都會被呼叫。

• 它無法訪問元件例項，因此我們不能直接在其中使用它。

總結

getDerivedStateFromProps 函式乍一看可能很難，但它是特定條件下的工具。簡單來說，它允許我們根據其 props 的更改來管理元件的狀態。