Question

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

关于useEffect，useMemo和useState之间的区别，以下说法正确吗？

两者 useState和useMemo都会记住渲染中的值。区别在于：
- useMemo不会导致重新渲染，而useState会导致
- useMemo仅在其依赖项（如果有）更改时运行，而setSomeState（useState返回的第二个数组项）没有这样的依赖项数组
两者 useMemo和useEffect仅在它们的依存关系更改时运行（如果有）。区别在于：
- useEffect在渲染发生后运行，而useMemo在之前运行

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

Answer 1

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

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

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

如果每个p << strong> useEffect 在其依赖项数组中的元素已更改（或每次数组被保留为空或为空）之后，则在每个渲染之后称为。

您随时可以查看https://reactjs.org/docs/hooks-reference.html，我认为这是一个非常可靠的文档

Answer 2

useEffect(callback, [dependency]) 的返回值为 void，它在 render() 之后执行。
useEffect(callback, [dependency]) 的返回值不是 void 而是记忆值，它在 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() 都会在浏览器完成绘制之前使该值可用。

反应：useEffect vs useMemo vs useState

2 个答案: