为什么 useMemo 作为 useEffect 挂钩中的函数？答案

【问题标题】：Why useMemo as function that are in the useEffect hook?为什么 useMemo 作为 useEffect 挂钩中的函数？
【发布时间】：2021-07-02 14:53:27
【问题描述】：

我有以下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() 的依赖项。

【问题讨论】：

嗨，何塞，欢迎来到 SO！你能澄清一下问题是什么吗？
嘿@YoavKadosh，我只是想知道useMemo 或在useEffect 中进行计算是否有任何真正的区别，你关注我吗？
我在这个链接stackoverflow.com/questions/56028913/…找到了解决方案
好的，很高兴你做到了。我也回答了你的问题，希望对你有帮助。

标签： reactjs react-hooks

【解决方案1】：

在性能方面，两者没有区别。仅当它们的至少一个依赖项发生更改时，才会执行两者。

但它们各有不同的用途。

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

在您的情况下，您似乎正在尝试计算一些值，因此您应该使用useMemo()。

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

【讨论】：