javascript - 使用初始化的 useState 的目的

Question

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

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

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

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

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

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

标签： javascriptreactjsreact-hooks

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>
    </>
  );
};