[React筆記] 使用 ref 傳 data,降低 render 次數
Published in
Nov 28, 2021
這篇是對之前 po 過的文章做拆分,單獨發出來,不然原本單篇好像太長了,而且這樣 title 也比較好取名。(笑)
使用 ref 傳遞 data 給 Child 組件,降低 render 次數
完成的 code 範例先上。
由父組件管理 state 的情況,要傳遞 data 給子組件,一般會採用 props 的方式。
class Parent extends React.Component {
state = { title: '' } render() {
return <Child title={this.state.title} />
}
}
當父組件調用 setState()
改變 state 時,React 會進行 re-render,讓子組件更新 props,然後子組件也會 re-render。
而當頁面內容複雜時,可能會有相當多的子組件,僅僅為了改變其中一個 Child 而重新 render 整個父組件,在效能上就會產生疑慮。
這時候可以透過 ref 的方式,在父層去控制子層的 state,這樣就能做到 state 在父層控管,但更新時僅 re-render 特定的子組件。
class Parent extends React.Component {
childRef = React.createRef()
state = { title: '' } componentDidMount() {
this.childRef.current?.setState({ title: 'something' })
} render() {
return <Child ref={this.childRef} />
}
}
理論上,這樣的作法應該會比觸發父層的 render 要輕量、高效。但估計現代瀏覽器跟 React 自身可能就有一些相關的底層優化,讓瀏覽器實際更新畫面時,會忽略沒有變動的 DOM。
但不管怎樣,去比較有無變動這個動作,一定還是有計算量消耗的,所以上述的做法應該或多或少能夠提高點效能才是。
另外要注意的是,這招僅限 Class 組件使用,Fcuntion 組件本身特性與 Class 不同,天然不支持這樣的手法。