強制 React 元件重新渲染

1. 強制 React 元件使用類元件重新渲染
2. 強制 React 元件使用函式元件重新渲染

預設情況下，React 元件會通過其 state 或 props 的更改觸發重新渲染。大多數時候，如果你遵循 React 的最佳實踐，這種行為足以達到預期的結果。

在某些情況下，框架的預設行為是不夠的，你需要手動重新渲染元件。在執行此操作之前，請仔細檢視程式碼。強制重新渲染僅在少數情況下是可行的選擇。

強制 React 元件使用類元件重新渲染

如果使用得當，呼叫 React Class Component 的 setState() 方法應該總是觸發重新渲染。shouldComponentUpdate() 生命週期可能包含阻止這種行為的條件邏輯。

如果你正在呼叫 setState() 但元件沒有更新，則你的程式碼可能有問題。確保你有使用 forceUpdate() 方法的正當理由。

this.forceUpdate()

如果你的 render() 方法依賴於 state 或 props 之外的資料，並且你想根據該資料的更改觸發重新渲染，你可以使用 forceUpdate() 方法。

示例程式碼：

class App extends Component {
  render() {
    return (    
    <div>
        <h1>{Math.random()}</h1>
        <button onClick={() => this.forceUpdate()}>Force Update</button>
    </div>)
  }
}

在這種情況下，更改 state 或 props 不會觸發更新。執行此操作的是 forceUpdate() 方法。

最佳實踐

React 開發人員應該只使用 forceUpdate() 作為最後的手段。渲染函式應該只讀取 props 和 state。通過遵循這些指南，你可以確保 React 元件的簡單性和效率。

不建議頻繁使用 forceUpdate() 方法。如果你經常使用它，你可能需要檢視你的程式碼，看看它是否可以改進。

強制 React 元件使用函式元件重新渲染

函式元件不包括 forceUpdate() 方法。但是，仍然可以使用 useState() 或 useReducer 鉤子強制它們重新渲染。

useState

類似於類元件的 setState() 方法，只要更新後的 state 物件具有不同的值，useState() 鉤子總是會觸發更新。

你可以建立一個自定義鉤子，使用 useState() 鉤子來強制更新。這是這種可重用鉤子的示例程式碼：

const useForceUpdate = () => {
  const [ignored, newState] = useState();
  return useCallback(() => newState({}), []);
}

眾所周知，useState() 鉤子返回兩個值：state 的當前值及其設定器。在這種情況下，我們只需要 newState setter。

useReducer

由於 useState 鉤子內部使用了 useReducer，你可以直接使用這個鉤子來建立一個更優雅的解決方案。React 官方文件 推薦的解決方案也使用 useReducer()。這是一個示例解決方案：

const [any, forceUpdate] = useReducer(num => num + 1, 0);
function handleChange(){
    forceUpdate();
}

useReducer() 鉤子返回當前的 state 和 dispatch 函式。在上面的例子中，我們使用 [variableName, dispatchName] 語法來儲存這些值。

在此示例中，呼叫 handleChange() 處理程式將強制你的元件每次更新。

鉤子不打算以這種方式使用。嘗試將這些解決方案用於測試或異常情況。