使用 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 上試用程式碼。