useState 和 useEffect 的区别

Question

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

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

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

Answer 1

当 function 被传递给useState时，这是向 React 发出使用惰性初始化的信号——function 将仅在组件挂载时被调用以计算初始值。

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

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

使用useEffect的时间是当无法同步计算要填充的值时，在这种情况下，最好的方法是同时使用useState （用于状态）和useEffect （表示您要运行 function 来检索state 值只有一次）。

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

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

这很令人困惑，因为

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