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