使用 React Hooks 强制重新渲染

1. 在 React 中使用 .forceUpdate() 方法
2. 在 React 中使用 Hooks 强制重新渲染

大多数 JavaScript 开发人员选择在 React 中构建应用程序。它的流行可以归因于它的特性，主要是 Virtual DOM。

React 组件有一个 shouldComponentUpdate() 方法，该方法在内部跟踪对 state 和 props 的更改并相应地更新视图。

通常，这种默认行为足以构建和运行复杂的 React 应用程序。但是，开发人员需要在极少数情况下绕过默认行为并手动重新渲染组件。

在 React 中使用 .forceUpdate() 方法

shouldComponentUpdate() 是更新 React 组件视图的默认方法。每当组件的 state 或 props 更改时，它都会自动触发。

如果组件接收到的数据不是来自 state 或 props，React 开发人员可以使用 component.forceUpdate() 方法强制重新渲染并更新视图。

一旦触发，此方法将更新组件的每个子组件。除非你确定需要它，否则不建议使用 component.forceUpdate() 方法。

测试或其他边缘情况可能需要它。

在 React 中使用 Hooks 强制重新渲染

React 版本 16.8 引入了钩子，它为功能组件添加了许多以前没有的特性。

例如，现在功能组件可以使用 useEffect() 挂钩来维护状态和处理副作用。

你可以使用 useState 和 useReducer 钩子来强制 React 组件重新渲染。

在我们的示例中，我们将使用 useReducer 钩子：

export default function App() {
  const [, forceRerender] = useReducer(x => x + 1, 0)
  return (
    <div className="App">
      <button onClick={() => forceRerender()}>Force Update</button>
    </div>
  );
}

正如我们所见，我们甚至没有设置变量来存储状态。因为我们只使用 useReducer() 挂钩来强制更新。

在这里，我们有一个带有 onClick 属性的简单按钮，每次单击按钮时都会执行 forceRerender 函数。

你可以在 codesandbox 上试用代码。