強制 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()
處理程式將強制你的元件每次更新。
鉤子不打算以這種方式使用。嘗試將這些解決方案用於測試或異常情況。
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