javascript - 我可以告诉 useMemo 跳过其依赖项数组中的空值吗？

Question

我有一个 useMemo 钩子(Hook)，它包装了一个组件，该组件仅在其 prop 具有特定形状时才需要重新渲染(不得为 null 并且必须包含时间戳属性)。

在下面的示例中，我的布局属性可能具有不同的值，例如 null、{timestamp:1, ...}、再次为 null...等。

我的目标是利用 useMemo 允许我的组件仅在布局具有时间戳时重新渲染，否则它必须返回已内存的时间戳。

import React, { useMemo } from "react";

export default ({layout}) => {
  const {timestamp} = layout || {};
  return useMemo(() => <div>current state: {timestamp}</div>, [timestamp]);
}

Answer 1

您可以有条件地从 useMemo 内返回

import React, { useMemo } from "react";

export default ({layout}) => {
  const {timestamp} = layout || {};
  return timeStamp && <div>current state: {timestamp}</div>;
}

作为替代方案，您可以使用 React.memo

import React, { memo } from "react";

export default memo(({layout}) => {
  const {timestamp} = layout || {};
  return useMemo(() => timestamp && <div>current state: {timestamp}</div>, [timestamp]);
}, (prevProps, newProps) => {
   const prevLayout = prevProps.layout || {};
   const layout = newProps.layout || {};
   if(layout.timestamp === prevLayout.timerstamp) return true;
   return false;
})