如何在啟動時只渲染一次 React 組件？

Question

我一直在閱讀有關性能的文檔，但找不到我的問題的答案...

我的應用程序上有一堆按鈕，它們將基於某些屬性而不是狀態呈現，父組件永遠不會改變它們的屬性。 然后我有這個onKeyDown事件處理程序，它將偵聽一些鍵並更新另一個組件。

我的問題是，當按下鍵並更新這個組件時，所有其他按鈕也會呈現（通過 Chrome 的 React 開發工具觀察）。 我還沒有在我的按鈕上實現shouldComponentUpdate(nextProps, nextState) ，但是 React 默認不應該有這種行為嗎？ 我的意思是，將this.props與nextProps進行比較，如果它們完全相同，請不要調用render() ？

我是否應該為每個只應在應用程序啟動時呈現一次的組件自己執行此操作？

編輯： PureComponent似乎解決了問題......但我沒有創建一個新問題，而是用一個相關問題更新了這個問題：

為什么文檔不建議默認使用基於 PureComponent 的所有組件？ 默認情況下，反對使用PureComponent而不是典型的Component的論據是什么？

Answer 1

純組件應該可以解決您的問題，因為它們默認實現了淺層的 prop 和 state 比較。

鏈接到文檔。

如果你的 React 組件的 render() 函數在給定相同的 props 和 state 的情況下呈現相同的結果，你可以在某些情況下使用 React.PureComponent 來提升性能。

Answer 2

確保 React 組件只呈現一次的一種方法是讓shouldComponentUpdate返回false ：

class MyComponent extends React.Component {

  shouldComponentUpdate = () => false

  render() {
    return <div>{ this.props.children }</div>;
  }
}

在上面的例子中，即使this.props.children改變了，組件也不會再次渲染。 安裝后，它只會渲染一次。