使用初始化的 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** 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>

    </>

  );

};