惰性初始化React state

完整示例代码如下：

import { useEffect, useState } from "react";

const getInitialNameValue = () => {
  console.log("getting initial value");
  return window.localStorage.getItem("name") || "";
};

function LazyStateInitialization() {
  console.log("rendering");

  const [name, setName] = useState(getInitialNameValue());

  useEffect(() => {
    window.localStorage.setItem("name", name);
  });

  function handleChange(event: any) {
    setName(event.target.value);
  }

  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input value={name} onChange={handleChange} id="name" />
      </form>
      {name ? <strong>Hello {name}</strong> : "Please type your name"}
    </div>
  );
}

export default LazyStateInitialization;

每次输入会改变state，从而使组件重新渲染。其中state初始化的逻辑getInitialNameValue()会在每次重新渲染执行。效果如下图：

这种行为在state初始化成本较高时会造成较大的性能负担。对此，我们可以使用“惰性初始化state”的方法进行优化。

具体的操作很简单，只需要向useState传入一个返回初始化state的函数即可。应用到前面的示例就是将useState的初始化改为useState(getInitialNameValue)。改完后的效果如下图：

可以看到此时即使组件重新渲染，初始化state的逻辑也不会再次执行了。