ReactJS - forceUpdate() 方法

React 中的组件充当网站或应用的构建块。它们可以显示多种内容并执行不同的操作。通常，组件仅在其自身状态或从外部获取的信息(称为 props)发生变化时才会更改或重新渲染。

React 组件仅在组件的状态或提供给它的 props 发生变化时才会重新渲染，但如果我们需要在任何数据发生变化时重新渲染组件，我们会使用 React 的 forceUpdate() 方法。调用 forceUpdate() 将强制重新渲染组件，忽略 shouldComponentUpdate() 方法，而是调用组件的 render() 方法。

因此，forceUpdate() 是一种让 React 组件自我刷新的方法，即使它认为不需要这样做。

语法

forceUpdate(callbackFunc)

参数

callbackFunc −这是一个可选的回调函数。如果我们定义一个回调，React 将在更新提交后执行它。

返回值

此函数不会返回任何内容。

示例

示例 1

让我们创建一个基本的 React 应用，展示如何使用 forceUpdate 函数。在此示例中，我们将有一个组件，它从外部 API 获取随机数并在单击按钮时更新 UI。

NumberDisplay.js

import React, { Component } from 'react';

class NumberDisplay extends Component {
   constructor() {
      super();
      this.state = {
         randomNumber: null,
      };
   }   
   fetchData = async () => {
      // 调用 API 来获取随机数
      const response = await fetch('https://www.random.org/integers/?num=1&min=1&max=100&format=plain');
      const data = await response.text();
      this.setState({ randomNumber: parseInt(data) });
   };   
   forceUpdateHandler = () => {
      // 使用 forceUpdate 手动更新组件
      this.forceUpdate();
   };   
   render() {
      return (
         <div>
            <h1>Random Number: {this.state.randomNumber}</h1>
            <button onClick={this.fetchData}>Fetch New Number</button>
            <button onClick={this.forceUpdateHandler}>Force Update</button>
         </div>
      );
   }
}

export default NumberDisplay;

App.js

import React from 'react';
import NumberDisplay from './NumberDisplay';

function App() {
   return (
      <div>
         <h1>ForceUpdate Example App</h1>
         <NumberDisplay />
      </div>
   );
}
export default App;

输出

示例 2

假设我们有一个简单的应用程序来计数。此计数器应用程序在屏幕上显示一个数字，从 0 开始。我们可以通过单击"增加计数"按钮来增加计数。但是，还有另一个标记为"强制更新"的按钮。当我们单击它时，即使我们没有增加计数，应用程序也会刷新并再次显示当前计数。此处使用 forceUpdate() 函数来确保显示始终是最新的。

import React from 'react';

class CounterApp extends React.Component {
   constructor() {
      super();
      this.state = { count: 0 };
   }   
   increaseCount() {
      this.setState({ count: this.state.count + 1 });
   }   
   forceUpdateCounter() {
      this.forceUpdate();
   }   
   render() {
      return (
         <div>
            <p>Count: {this.state.count}</p>
            <button onClick={() => this.increaseCount()}>Increase Count</button>
            <button onClick={() => this.forceUpdateCounter()}>Force Update</button>
         </div>
      );
   }
}

export default CounterApp;

输出

示例 3

现在让我们创建一个消息应用程序。此程序在屏幕上显示一条消息，最初设置为"Hello, world!"。通过点击"更改消息"按钮，我们可以更改消息。但是有一个"强制更新"按钮。当我们点击此按钮时，应用程序将刷新并显示当前消息。要实现此刷新行为，需要 forceUpdate() 函数。

import React from "react";

class MessageApp extends React.Component {
   constructor() {
      super();
      this.state = { message: "Hello, world!" };
   }   
   changeMessage(newMessage) {
      this.setState({ message: newMessage });
   }   
   forceUpdateMessage() {
      this.forceUpdate();
   }   
   render() {
      return (
         <div>
            <p>{this.state.message}</p>
            <button onClick={() => this.changeMessage("New Message")}>
               Change Message
            </button>
            <button onClick={() => this.forceUpdateMessage()}>Force Update</button>
         </div>
      );
   }
}

export default MessageApp;