为什么 useMemo 作为 useEffect 挂钩中的 function ？

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 useState() ) 维护 state ，这确实会对性能产生负面影响，因为它会触发额外的渲染。