reactjs - 函数组件中的shouldComponentUpdate

Question

我有一个关于 React 的 shouldComponentUpdate 的问题(当未覆盖时)。我确实更喜欢纯函数组件，但我担心它每次都会更新，即使 props/state 没有改变。所以我正在考虑使用 PureComponent 类。

我的问题是:函数组件是否具有与 PureComponent 相同的 shouldComponentUpdate 检查？还是每次都会更新？

Answer 1

每次父组件渲染函数组件时，无论 props 是否改变，它都会重新渲染。

但是，使用React.memo高阶组件实际上功能组件有可能获得相同的shouldComponentUpdate检查 PureComponent 中使用了哪个https://reactjs.org/docs/react-api.html#reactmemo

您可以简单地将功能组件包装在 React.memo 中导出时如下所示。

所以

const SomeComponent = (props) => (<div>HI</div>)
export default SomeComponent

可以改为

const SomeComponent = (props) => (<div>HI</div>)
export default React.memo(SomeComponent)

示例

以下示例展示了这如何影响重新渲染

父组件只是一个常规的功能组件。它正在使用新的 react hooks处理一些状态更新。

它只有一些tick state 的目的只是提供一些关于我们重新渲染 prop 的频率的线索，而它强制父组件每秒重新渲染两次。

此外，我们还有一个clicks状态告诉我们点击按钮的频率。这就是我们送给 children 的 Prop 。 因此，如果我们使用 React.memo，则只有当点击次数发生变化时，它们才应该重新渲染

现在请注意，我们有两个不同类型的 child 。一个包裹在 memo和一个不是。 Child未包装的，每次父级重新渲染时都会重新渲染。 MemoChild被包装的，只会在 clicks 属性更改时重新渲染。

const Parent = ( props ) => {
  // Ticks is just some state we update 2 times every second to force a parent rerender
  const [ticks, setTicks] = React.useState(0);
  setTimeout(() => setTicks(ticks + 1), 500);
  // The ref allow us to pass down the updated tick without changing the prop (and forcing a rerender)
  const tickRef = React.useRef();
  tickRef.current = ticks;

  // This is the prop children are interested in
  const [clicks, setClicks] = React.useState(0);

  return (
    <div>
      <h2>Parent Rendered at tick {tickRef.current} with clicks {clicks}.</h2>
      <button 
        onClick={() => setClicks(clicks + 1)}>
        Add extra click
      </button>
      <Child tickRef={tickRef} clicks={clicks}/>
      <MemoChild tickRef={tickRef} clicks={clicks}/>
    </div>
  );
};

const Child = ({ tickRef, clicks }) => (
  <p>Child Rendered at tick {tickRef.current} with clicks {clicks}.</p>
);

const MemoChild = React.memo(Child);

实例(也on CodePen):

console.log("HI");

const Parent = ( props ) => {
  const [ticks, setTicks] = React.useState(0);
  const tickRef = React.useRef();
  tickRef.current = ticks;
  const [clicks, setClicks] = React.useState(0);
  
  setTimeout(() => setTicks(ticks + 1), 500);
  return (
    <div>
      <h2>Parent Rendered at tick {tickRef.current} with clicks {clicks}.</h2>
      <button 
        onClick={() => setClicks(clicks + 1)}>
        Add extra click
      </button>
      <Child tickRef={tickRef} clicks={clicks}/>
      <MemoChild tickRef={tickRef} clicks={clicks}/>
    </div>
  );
};

const Child = ({ tickRef, clicks }) => (
  <p>Child Rendered at tick {tickRef.current} with clicks {clicks}.</p>
);

const MemoChild = React.memo(Child);


ReactDOM.render(
  <Parent />,
  document.getElementById('root')
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>