React 將 PureComponent 包裝在 HOC 中

Question

我有一個關於 PureComponent in react 的問題。 如您所知，它在長 FlatList 中非常有用，可以避免不必要的重新渲染。 但是，如果我像這樣將 PureComponent 包裝在 HOC 中會發生什么：

const CachedImage = withCache(
  class CachedImage extends React.PureComponent {
    render() {
      console.log("Rendering");
      return <Image {...this.props} />;
    }
  }
);

...並將其用作 FlatList 項目。 我的意思是，CachedImage 也會避免不必要的重新渲染嗎？ 我不知道，因為它似乎是一個擴展 PureComponent 而不是最終組件本身的子組件......

謝謝你。

Pd: withCache HOC 的實現方式通常每個 HOC 是：

  const withCache = (Component) => {
      const Wrapped = (props) => {
           ...

Answer 1

Component和PureComponent之間的唯一區別是PureComponent沒有實現shouldComponentUpdate() ，而是PureComponent通過一個淺層的 prop 和 state 比較PureComponent實現它。

這意味着它會對你的 props 進行簡單的淺層比較，這要快得多，但需要將簡單的對象作為 props 傳遞才能正常工作。 因此，不僅僅是擴展PureComponent會給您帶來不必要的重新渲染，而且您還必須考慮您的 props 與該組件的比較是否正確。

你可以在這里閱讀更多關於PureComponent信息， 這里有一些關於淺比較實際工作原理的信息。