如何使用 React 内置的 React.memo 比较功能？

Question

我想检查某个 prop 是否手动更改，然后使用 React 的内置比较功能对其他 prop 进行比较。例如：React.memo(  () => <div />,  (prevProps, nextProps) => {    if (!nextProps.visible) {      return true;    }    return React.shallowCompare(prevProps, nextProps);  },);我可以轻松编写自己的比较函数或从 React 的源代码复制/粘贴，但如果 React 更改了它们的默认比较函数，那么我也必须手动更改我的函数。有没有办法使用 React 的内置比较功能React.memo？此外，AFAIKreact-addons-shallow-compare已过时。

Answer 1

抱歉不行。shallowEqual如果您不提供比较功能，则React 默认为，但如果您返回任何特殊的东西（例如return null），则没有使用默认行为的额外逻辑。

React 的用法：

const prevProps = currentChild.memoizedProps;

// Default to shallow comparison

let compare = Component.compare;

compare = compare !== null ? compare : shallowEqual;

if (compare(prevProps, nextProps) && current.ref === workInProgress.ref) {

...

React 目前没有导出shallowEqual. 但是，React 的文档指出它只是浅比较，这不太可能发生太大变化，并且可以像您所知的那样轻松实现（示例）。我假设这个决定是为了减少他们的团队向开发人员公开的 API。