反应：useEffect vs useMemo vs useState

Question

我试图在网上找到一个简洁的答案，但是没有运气。

是关于之间的差异以下正确的useEffect，useMemo和useState？

• 两者 useState和useMemo都会记住渲染中的值。区别在于：
  • useMemo不会导致重新绘制，而useState不会
  • useMemo仅在其依赖项（如果有）更改时运行，而setSomeState（由返回的第二个数组项useState）没有此类依赖项数组时运行
• 双方 useMemo并useEffect只有当它们的依赖关系发生变化（如果有的话）上运行。区别在于：
  • useEffect运行后渲染发生，同时useMemo运行前

我错过了其他关键区别吗？

Answer 1

• 的返回值useEffect(callback, [dependency])是void并且它在之后执行render()。
• 的返回值useMemo(callback, [dependency])不是void记忆值，并且它在 DURING 期间执行render()。

useEffect()useMemo()在以下情况下可以给出相同的优化：

• 昂贵计算中使用的状态变量（即 count1）是 useEffect 的唯一依赖项。
• 当我们不介意将昂贵的计算值存储在状态变量中时。

const [count1, setCount1] = useState(0);
const [expensiveValue, setExpensiveValue] = useState(null);
useEffect(() => {
    console.log("I am performing expensive computation");
    setExpensiveValue(((count1 * 1000) % 12.4) * 51000 - 4000);
  }, [count1]);   

• 唯一的区别是，useEffect()使昂贵的计算值在之后可用render()，而使useMemo()该值在 期间可用render()。
• 大多数情况下，这并不重要，因为如果已经计算了该值以在 UI 中渲染，useEffect()并且useMemo()两者都会在浏览器完成绘制之前使该值可用。

Answer 2

您的观点基本上是正确的，需要一些澄清：

useState导致对setState方法的调用（返回的数组中的第二个元素）重新呈现。它没有诸如useMemo或useEffect之类的任何依赖项。

useMemo仅在其依赖项数组中的元素发生更改时才重新计算值（如果没有依赖项，即数组为空，则仅重新计算一次）。如果忽略该数组，它将在每次渲染时重新计算。调用该函数不会导致重新渲染。它还在组件渲染期间而不是之前运行。

如果其依赖项数组中的元素已更改或该数组被忽略，则在每个渲染之后调用useEffect。如果该数组为空，则它将仅在初始安装时运行一次（如果返回清除函数，则将其卸载）。

您始终可以查看Hooks API参考，这是我认为非常不错的文档