为何两段React代码一段正常一段触发无限重渲染？

为什么会触发无限重渲染？ #

你直接在组件函数体里调用setState更新从localStorage读取的值——每次组件渲染都会执行这段代码，调用setState又会触发组件重新渲染，形成循环，最终触发React的重渲染限制。而普通变量不会触发组件重渲染，所以不会有这个问题。

useState适用于这个场景吗？ #

当然适用。useState就是用来管理组件内部状态的，从localStorage读取初始值是非常常见的需求，只是你用错了调用时机。

解决方法 #

方法1：直接用localStorage作为useState的初始值（推荐）

把读取localStorage的逻辑放在useState的初始化参数里，用函数形式初始化还能避免每次渲染都读取localStorage，提升性能：

function Admin() {
  // 函数形式的初始化只会在组件首次渲染时执行一次
  const [userInfo, setUserInfo] = useState(() => {
    const savedData = localStorage.getItem('adminUser');
    return savedData ? JSON.parse(savedData) : null;
  });

  // 组件其他逻辑...
}

组件只会在首次渲染时读取localStorage并初始化状态，不会触发重复渲染。

方法2：配合useEffect监听localStorage变化（如果需要同步其他页面的修改）

如果你的应用存在多页面共享localStorage的场景，需要在其他页面修改localStorage时同步当前组件的状态，可以用useEffect添加监听：

function Admin() {
  const [userInfo, setUserInfo] = useState(() => {
    const savedData = localStorage.getItem('adminUser');
    return savedData ? JSON.parse(savedData) : null;
  });

  useEffect(() => {
    // 监听storage事件
    function handleStorageUpdate(e) {
      if (e.key === 'adminUser') {
        setUserInfo(e.newValue ? JSON.parse(e.newValue) : null);
      }
    }

    window.addEventListener('storage', handleStorageUpdate);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('storage', handleStorageUpdate);
  }, []); // 空依赖数组，确保监听逻辑只执行一次

  // 组件其他逻辑...
}

这里的useEffect空依赖数组保证监听逻辑只会在组件挂载时执行一次，不会每次渲染都触发setState。

总结 #

useState完全适配从localStorage读取状态的场景，错误的核心是你在组件渲染周期内无限制调用setState导致循环重渲染。通过正确的初始化方式或配合useEffect就能解决问题。

内容的提问来源于stack exchange，提问作者Misbahu Abubakar