javascript - useState 和 useEffect 之间的区别

Question

我使用 useState 而不是 useEffect，它可以很好地显示数据(为什么？)

React.useState(() =>getMovies(), [])

注意:我添加了 console.log 并且得到了相同的结果

Answer 1

当函数传递给 useState 时，这是向 React 发出使用 lazy initialization 的信号。 - 仅当组件挂载时才会调用该函数计算初始值。

如果要放入状态的值可以同步计算/检索，这可能是最好的设计模式 - 它很短，并且不需要您稍后区分状态是否值未定义或已填充。

const [stateValue, setStateValue] = useState(calculateExpensiveInitialStateValue);

使用 useEffect 的时间是当要填充的值无法同步计算时，在这种情况下，最好的方法是同时使用 useState (对于状态)和 useEffect(表示您想要运行一个函数来检索状态值一次)。

虽然理论上你可以有一条线，就像

React.useState(() =>getMovies(), [])

这很令人困惑，因为

• 不使用返回的结果状态值
• useState 不接受第二个参数依赖数组

useEffect 更适合该任务，因为它没有返回值(与 useState 不同)，并且更灵活，因为它接受依赖项数组。 useEffect 更清楚地向代码读者指示“此回调应仅在依赖项数组更改时运行。”