useState的目的与初始化

Question

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

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

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

下面的示例使用箭头功能进行初始化。

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

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

Answer 1

像stated in docs：

initialState参数是初始渲染期间使用的状态。在后续渲染中，将忽略它。如果初始状态是昂贵的计算结果，则可以提供仅在初始渲染时执行的功能。

因此，在传递值时，将在每个渲染器上计算该值。

// Will call JSON.parse and get item "count" from local storage
// on **every** render
const [count, setCount] = useState(JSON.parse(localStorage.getItem("count")))

传递回调只会调用一次。

// Will call JSON.parse and get item "count" from local storage
// **once** on initial render
const [count, setCount] = useState(()=>JSON.parse(localStorage.getItem("count")))

在下一个示例中，将值calc()（类似于第一种情况）作为初始状态将在每个渲染上记录“被调用”。进行回调时不会。

const calc = () => {
  console.log("called");
  return 42;
};

const App = () => {
  // value: calc() 
  // const [state, setState] = useState(calc());

  // callback : () => calc()
  const [state, setState] = useState(calc);
  return (
    <>
      {state}
      <button onClick={() => setState(p => p + 1)}>render</button>
    </>
  );
};