问React: useEffect vs useMemo vs useState

EN

你的观点基本上是正确的，有一些细微的澄清：

useState在调用setState方法(返回的数组中的第二个元素)时导致重新呈现。它没有任何像useMemo或useEffect那样的依赖项。

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

如果其依存关系数组中的元素已更改或该数组被遗漏，则在每次渲染后，useEffect将被称为。如果阵列为空，则只会在初始装载时运行一次(如果返回清理函数，则还会卸载)。

您可以随时查看Hooks API Reference，在我看来，它是一个非常可靠的文档

• useEffect(callback, [dependency])的返回值是void，它在render().
• The的返回值不是void而是memoized值之后执行，它在render().

期间执行

在以下情况下，useEffect()可以提供与useMemo()相同的优化：

在昂贵的计算中使用的状态变量(即count1)是useEffect.

• When的唯一依赖项，我们不介意将昂贵的计算值存储在状态变量中。

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().
• Most期间可用，这并不重要，因为如果该值已被计算用于在UI中呈现，则useEffect()和useMemo()都将使该值在浏览器完成绘制之前可用。