Question

我正在使用一个第三方组件，该组件在每次状态变化时都会重新渲染，这很好，但是在某些情况下，即使状态变化，我也不希望它重新渲染。有没有一种方法可以使用React功能组件。我在网上阅读过，上面写着使用shouldComponentUpdate（），但是我正在尝试使用功能组件，并尝试使用React.Memo，但是它仍然会重新渲染

代码

const getCustomers = React.memo((props) => {

useEffect(() => {

});

return (
<>
<ThirdPartyComponent>
do other stuff 
{console.log("Render Again")}
</ThirdPartyComponent>

</>
)
});

Answer 1

For props:

如何实现shouldComponentUpdate？

您可以使用React.memo包装功能组件以浅浅地比较其道具：

const Button = React.memo((props) => {
  // your component
});

它不是挂钩，因为它的构成不像挂钩。 React.memo等同于PureComponent，但仅比较道具。（您还可以添加第二个参数来指定使用旧的和新的道具的自定义比较函数。如果返回true，则跳过更新。）

状态：

没有实现此目的的构建方法，但是您可以尝试将逻辑提取到自定义钩子中。这是我的尝试，仅当shouldUpdate返回true时才重新呈现。谨慎使用它，因为它与React设计的目的相反：

const useShouldComponentUpdate = (value, shouldUpdate) => {
  const [, setState] = useState(value);
  const ref = useRef(value);

  const renderUpdate = (updateFunction) => {
    if (!updateFunction instanceof Function) {
      throw new Error(
        "useShouldComponentUpdate only accepts functional updates!"
      );
    }

    const newValue = updateFunction(ref.current);

    if (shouldUpdate(newValue, ref.current)) {
      setState(newValue);
    }

    ref.current = newValue;
    console.info("real state value", newValue);
  };

  return [ref.current, renderUpdate];
};

您将像这样使用它：

  const [count, setcount] = useShouldComponentUpdate(
    0,
    (value, oldValue) => value % 4 === 0 && oldValue % 5 !== 0
  );

在这种情况下，仅当setcount返回true时，才会发生重渲染（由于shouldUpdate的使用）。也就是说，当value是4的倍数而先前的值不是5的倍数时。请与我的CodeSandbox example一起玩，看看这是否真的是您想要的。

停止重新渲染React功能组件

1 个答案: