[React筆記] 使用 ref 傳 data，降低 render 次數

這篇是對之前 po 過的文章做拆分，單獨發出來，不然原本單篇好像太長了，而且這樣 title 也比較好取名。(笑)

• Loop nested JSX in React
• 改變 CSS 來做條件渲染
• 使用 Markdown 做條款類頁面

使用 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 不同，天然不支持這樣的手法。