如果數組更改但某些鍵保持不變，React 是否會重新渲染 FOR 循環的所有組件？

Question

我正在實現無限滾動視頻。 每個組件都有一個唯一的 id im 用作鍵。 每個組件都會非常大，所以我想一次只在 DOM 上保留幾個項目。 For example if i have 5 elements with id A,B,C,D,E and next state is B,C,D,E,F will B,C,D,E be rerendered by React?

謝謝你的幫助！

Answer 1

B,C,D,E 會被 React 重新渲染嗎？

技術上是的，但是為了增強性能，React 使用了虛擬 DOM，當 state 發生變化時，會更新虛擬 DOM，並比較虛擬 DOM 的先前版本和當前版本，最后 React 會向真實 DOM 發送批量更新以更新 UI。 這意味着它將僅渲染已更改為真實 DOM 的元素。

Answer 2

取決於您對重新渲染、重新生成 jsx 或重新創建和替換 DOM 元素的含義。

jsx 在以下情況下重新創建：

1. 當父級創建新的 jsx 並且子級是功能組件（未包裝在 React.memo 中）時，子級將重新創建 jsx，因為功能組件總是重新創建 jsx。
2. 當父級重新創建 jsx 並傳遞給子級不同的 prop 值時，與之前的渲染不同。
3. 當[value,setValue]=useState()中的值或this.state改變時（當 state 改變時）。
4. 當 value value = useContext(someContext)中的值發生變化時。
5. 在大多數情況下，當 value value = useCustomHook()中的值發生變化時，但這並不能保證每個鈎子都如此。
6. 當 Parent 渲染並向 Child 傳遞與前一個渲染不同的 key prop 時（參見 2）。 這也會導致 Child 卸載並重新安裝。

創建新的 jsx 並不意味着重新創建 DOM 元素，在創建 jsx（虛擬 dom）之后，React 會將其與實際 DOM 進行比較，並且僅在實際 DOM 更改時才更新實際 DOM。 這個比較循環可以通過使用 React.memo、React.useMemo 和重新選擇來記憶 jsx 來優化。

隨着道具在渲染之間改變值，我的意思是對象的引用或基元的值已經改變。 所以propName={{new:'object'}}和propName={{new:'object'}}會有所不同。 創建的虛擬 dom (jsx) 可能與 DOM 相同，因此組件不會實際呈現。 但是當您執行類似onClick={new=>'function'}操作時，虛擬 dom 比較總是會失敗，這就是使用 useCallback 的原因。