React hooks - 如何在同时检查状态和 props 的功能组件中实现 shoulComponentUpdate

Question

我想使用 React Hooks 实现shouldComponenetUpdate。我遇到的所有答案都建议React.memo是这样做的方法，但第二个论点React.memoprevProps和nextProps作为论据，而我想根据状态检查我的状况。

关于如何实现这一目标的任何帮助？

Answer 1

不完全正确，React.memo是一种将进行浅层比较的组件。

根据您希望重新渲染考虑的内容，您可以使用钩子，例如useMemo、useCallback、useEffect

它们的工作原理如下：

const bla = useMemo(() => { return computeSomeValue() }, []);

第二个参数是依赖项 (deps(。 当组件应重新渲染时，这些将浅层比较，如果没有更改，则不会重新计算bla，也不会更新组件。

因此，假设我们对某些属性有依赖性，您可以这样做

const bla = useMemo(() => { return computeSomeValue(myProperty) }, [myProperty]);

Answer 2

如果您的状态更改，您的组件已经渲染。如果您希望具有不触发渲染的"保存状态"，请使用React.useRef。

您可以在此处了解更多信息：https://reactjs.org/docs/hooks-reference.html#useref