使用初始化的 useState 的目的

Question

我不明白将 useState 与初始化程序一起使用的目的。

下面是一个示例，我在这里设置了一个保留在本地存储中的计数器，我没有使用箭头函数来初始化它。

const [count, setCount] = useState(JSON.parse(localStorage.getItem("count")))

下面的示例使用箭头函数进行初始化。

const [count, setCount] = useState(()=>JSON.parse(localStorage.getItem("count")))

有人可以解释何时使用箭头功能以及用于什么目的。

Answer 1

如文档中所述：initialState参数是初始渲染期间使用的状态。在随后的渲染中，它被忽略。如果初始状态是昂贵计算的结果，您可以提供一个函数，该函数将仅在初始渲染时执行。因此，在传递一个值时，每次渲染都会计算该值。// Will call JSON.parse and get item "count" from local storage// on **every** renderconst [count, setCount] = useState(JSON.parse(localStorage.getItem("count")))传递回调只会调用一次。// Will call JSON.parse and get item "count" from local storage// **once** on initial renderconst [count, setCount] = useState(()=>JSON.parse(localStorage.getItem("count")))在下一个示例中，将一个值calc()（类似于第一种情况）作为初始状态将在每次渲染时记录“调用”。虽然有回调，但不会。const calc = () => {&nbsp; console.log("called");&nbsp; return 42;};const App = () => {&nbsp; // value: calc()&nbsp;&nbsp; // const [state, setState] = useState(calc());&nbsp; // callback : () => calc()&nbsp; const [state, setState] = useState(calc);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; {state}&nbsp; &nbsp; &nbsp; <button onClick={() => setState(p => p + 1)}>render</button>&nbsp; &nbsp; </>&nbsp; );};