使用 React Hooks 强制重新渲染

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中使用 .forceUpdate() 方法
  2. 在 React 中使用 Hooks 强制重新渲染
使用 React Hooks 强制重新渲染

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

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

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

在 React 中使用 .forceUpdate() 方法

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

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

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

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

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

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

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

你可以使用 useStateuseReducer 钩子来强制 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 上试用代码。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Hooks