Question

由于options的引用在ParentComp重新呈现时发生了更改，因此有哪些好的方法可以防止SubComp的属性未更改时重新呈现？情况示例：

const ParentComp = ({ uri, someOtherProp }) => {
  [...some other state hooks here]
  return <SubComp options={{ uri }} someOtherProp={someOtherProp}/>
}

Answer 1

React.memo

如果函数组件在相同条件下呈现相同结果道具，您可以将其包装在对React.memo的调用中以提高性能在某些情况下，通过记忆结果。这意味着React将跳过渲染组件，然后重用最后渲染的结果。

const ParentComp = ({ uri, someOtherProp }) => {
  [...some other state hooks here]
  return <SubComp options={{ uri }} someOtherProp={someOtherProp}/>
}

const equalProps = (prevProps, nextProps) => {
  /*
  return true if passing next props would/should
  result in the same output, false otherwise
  */
};

export default memo(ParentComp, equalProps);

注意：

此方法仅作为性能优化存在。不要依靠它可以“防止”渲染，因为这可能会导致错误。

Answer 2

另一种这样做的方法，可以防止父对象每次渲染选项道具时都传递新的引用。现在，您正在执行options={{ uri }}，但正在执行{ uri }!=={ uri }。即使uri不变，您也正在为选项创建一个新对象。

您可以为此使用useMemo

const ParentComp = ({ uri, someOtherProp }) => {
  const options = React.useMemo(() => ({ uri }), [uri]);
  return (
    <SubComp
      options={options}
      someOtherProp={someOtherProp}
    />
  );
};

如果您有很多道具，只是想让SubComponent在某些变化时重新呈现，则可以执行以下操作：

const ParentComp = ({ uri, someOtherProp }) => {
  const memoProps = React.useMemo(
    () => ({
      options: { uri },
      someOtherProp,
    }),
    [someOtherProp, uri]
  );
  return <SubComp {...memoProps} />;
};

这假定SubComp是从PureComponent继承的类，使用React Redux connect包装的组件或使用React.memo包装的功能组件（不需要比较功能）。即使道具与先前的渲染具有相同的引用，正常的功能组件也会重新渲染。

如何避免“选项”道具被内联初始化？

2 个答案: