Question

我有以下useEffect()：

useEffect(() => {
if (portfolios && portfolios.length > 0) {
  const wLocation = portfolios.filter((portfolio: Portfolios) =>
    portfolio.organizations.some(organization => organization.locations ?? false),
  );
  const wOutLocation = portfolios.filter((portfolio: Portfolios) =>
    portfolio.organizations.every(organization => organization.locations ?? true),
  );
  setPortfoliosWOutLocation(getItemsWRGB(wOutLocation.map(portfolioFormatted)));
  setPortfoliosWLocation(getItemsWRGB(wLocation.map(portfolioFormatted)));
}}, [portfolios]);

我的一个合作伙伴告诉我，我可以使用 useMemo 以避免在每次渲染时重新计算，所以我这样做了：

const portfolioWLocation = useMemo(() => {
const wLocation = portfolios.filter((portfolio: Portfolios) =>
    portfolio.organizations.some(organization => organization.locations ?? false),
  );
return getItemsWRGB(wLocation.map(portfolioFormatted));}, [portfolios]);

const portfolioWOutLocation = useMemo(() => {
const wOutLocation = portfolios.filter((portfolio: Portfolios) =>
    portfolio.organizations.every(organization => organization.locations ?? true),
  );
return getItemsWRGB(wOutLocation.map(portfolioFormatted));}, [portfolios]);

不会相同，因为 portfolios 是 useMemo() 和 useEffect() 的依赖项。

Answer 1

在性能上，两者没有区别。只有当它们的依赖项至少有一个发生变化时，它们才会被执行。

但它们都有不同的用途。

useMemo() 用于记忆以后可以在组件中使用的值，而 useEffect() 用于执行副作用（通常用于执行一些 DOM 操作或更新状态）。

就您而言，您似乎正在尝试计算某个值，因此您应该使用 useMemo()。

如果使用 useEffect()，则必须使用 useState() 维护状态，这确实会对性能产生负面影响，因为它会触发额外的渲染。

为什么 useMemo 作为 useEffect 钩子中的函数？

1 个答案: