javascript - 在 useState() 声明处赋值与 useEffect() 比较

Question

我一直交替使用这两种方法，但我不确定哪一种更正确。他们的行为似乎是相同的，但我确信每个都有一个用例。任何人都可以帮助我了解每种情况的正确用途是什么？

const [customer, setCustomers] = useState(props.location.state);

  useEffect(() => {
    setCustomers(props.location.state);
  }, []);

Answer 1

您通常应该坚持第一个。调用 useState 的 setter 可能会导致意外的重新渲染并降低性能。

在第一个 block 中，客户直接初始化，并且不会发生重新渲染。 setCustomer 方法将更改状态并重新呈现组件。最后整个函数将运行两次，您可以使用 console.log 进行验证。

const [customer, setCustomers] = useState(0);

useEffect(() => {
  setCustomers(15);
}, []);

console.log(customer) // will first output 0 and then 15