上述程式碼傳遞一個物件的化,是否容易造成子元件的多次重複渲染

龙陌發表於2024-03-19
const renderStartTime = useCallback((text, record, idx, changeTableData) => {
	return (
		<CacheRender
			dataIndex="startTime"
			controlRules={() => startTimeRules(record, idx, measTableRef.current)}
			compType="input"
			type="number"
			compProps={{
				min: 1,
				max: 9999,
				hasAuto: true,
				precision: 2,
			}}
			step={0.01}
			controls
			placeholder="1-9999"
			text={text}
			record={record}
			changeTableData={changeTableData}
		/>
	)
}, [])

在React中,useCallback Hook 有助於最佳化效能,透過快取回撥函式來避免在父元件每次渲染時生成新的引用,進而避免不必要的子元件重新渲染。

在你給出的程式碼片段中,renderStartTime 是一個使用 useCallback 快取的函式,它的依賴陣列是空陣列 []
這意味著除非在元件生命週期中有其他因素導致其閉包變數發生變化,否則 renderStartTime 回撥函式的引用不會在每次父元件渲染時更改。

compProps 是作為 CacheRender 元件的一部分傳遞的一個物件。
只要這個物件的內容在每次渲染時保持不變,即使它是一個新建立的物件,也不會引起 CacheRender 元件的不必要的重新渲染。
這是因為React在進行淺比較時,會對比前後兩個props物件的每個鍵值對是否相同,而不是比較它們的引用。

然而,如果有以下情況之一,CacheRender 元件可能會因 compProps 內部值的改變而重新渲染:

  • startTimeRules 函式內部有任何依賴於外部狀態或props的值發生了變化,儘管在當前程式碼中並未體現出來。
  • compProps 中的 minmaxprecisionstep 等值在父元件的狀態或props中變動。

綜合來看,只要你確保 compProps 物件的屬性值在每次渲染時保持一致,就不會因為 compProps 的傳遞而導致 CacheRender 元件的不必要的重複渲染。
但如果其內部值依賴於不斷變化的狀態或props,就需要考慮是否有必要將其加入到 useCallback 的依賴陣列中,或者最佳化那些會導致 compProps 內部值頻繁變化的狀態管理。

相關文章