如何创建状态变更时自动执行的触发函数？状态变化如何同步更新localStorage？

1. shouldComponentUpdate() 能否在函数组件中使用？ #

不可以。shouldComponentUpdate 是类组件专属的生命周期方法，函数组件本身没有生命周期方法的概念。如果要在函数组件中实现类似 shouldComponentUpdate 的渲染控制效果，可以用 React.memo 对组件进行包裹，对props做浅比较控制重渲染，或者配合 useMemo/useCallback 缓存值和回调函数，但该方法本身的设计目的是控制组件渲染逻辑，并不适合用来做localStorage的状态同步。

2. localStorage 同步状态的最优实现方案 #

单组件内的状态同步 #

如果是组件内部的私有状态需要同步，直接用 useEffect 钩子监听对应状态的变化即可，示例代码：

import { useState, useEffect } from 'react';

function ExampleComponent() {
  // 初始化时优先从localStorage读取已有值
  const [userInfo, setUserInfo] = useState(() => {
    const saved = localStorage.getItem('userInfo');
    return saved ? JSON.parse(saved) : { name: '', age: 0 };
  });

  // 状态变化时自动同步到localStorage
  useEffect(() => {
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
  }, [userInfo]); // 仅在userInfo变更时触发同步逻辑

  // 后续正常修改userInfo即可，无需额外处理同步
  return <div>...</div>
}

多组件共享状态的同步 #

如果该状态需要在多个组件中复用，可以把同步逻辑封装成自定义Hook：

function useLocalStorageState(key, defaultValue) {
  const [state, setState] = useState(() => {
    const saved = localStorage.getItem(key);
    return saved ? JSON.parse(saved) : defaultValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(state));
  }, [key, state]);

  return [state, setState];
}

// 任意组件内直接调用即可
function ComponentA() {
  const [theme, setTheme] = useLocalStorageState('theme', 'light');
  return <button onClick={() => setTheme('dark')}>切换深色模式</button>
}

注意：敏感信息不要存储在localStorage中，该存储方式为明文存储，容易被窃取。如果需要实现跨标签页的状态同步，还可以额外监听storage事件来同步不同标签页的状态值。

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