useContext场景下父组件状态更新致子组件状态丢失问题咨询

1. 应用结构是否可行？ #

这个结构整体方向是可行的，React Context本身就是为跨组件共享状态设计的方案，但你的代码存在几个关键问题，才导致了当前的异常表现。

2. 存在的核心问题 #

• Context.Provider的value频繁重建：在App组件中，每次渲染都会新建userContext对象，这会触发所有订阅该Context的子组件（Child）无条件重渲染，哪怕userData本身没有变化。
• 子组件渲染阶段直接调用setState：你在Child组件的函数体里直接执行setChildState('new value')，这会导致组件一渲染就触发状态更新，形成无限渲染循环；而且每次重渲染时，useState都会用初始值重新初始化，这才是你觉得子状态丢失的真正原因，并非全局状态更新直接导致。
• Provider标签书写错误：代码里的<Context.Context.Provider>是笔误，正确写法应为<Context.Provider>。

3. 如何持久化子组件的状态？ #

• 修正setState的调用时机：绝对不要在组件渲染阶段直接调用setState，应放到副作用钩子（useEffect）或事件回调中。比如仅在组件初始化时设置一次，或在特定事件触发时更新：

  const Child = () => {
    const [childState, setChildState] = useState('default value')
  
    // 组件挂载完成后仅执行一次
    useEffect(() => {
      setChildState('new value')
    }, [])
  
    const userContext = useContext(Context)
    const handleUpdateGlobalState = () => {
      userContext.setUserData('some change to userdata')
    }
  
    return (
      <button onClick={handleUpdateGlobalState}>更新全局状态</button>
    )
  }
  

• 稳定Context的value：用useMemo包裹userContext对象，仅当userData变化时才重新创建，避免子组件无意义重渲染：

  function App() {
    const [userData, setUserData] = useState()
  
    const userContext = useMemo(() => ({
      userData,
      setUserData
    }), [userData])
  
    return (
      <Context.Provider value={userContext}>
        <Child />
        <Child />
        <Child />
      </Context.Provider>
    )
  }
  

• 如果需要页面刷新后仍保留子状态，可以结合localStorage：

  const Child = () => {
    // 初始化时从本地存储读取状态
    const [childState, setChildState] = useState(() => {
      return localStorage.getItem('childState') || 'default value'
    })
  
    // 状态变化时同步到本地存储
    useEffect(() => {
      localStorage.setItem('childState', childState)
    }, [childState])
  
    // ...其他业务逻辑
  }
  

4. 是否需要将共享状态移出App组件？ #

不需要，把共享状态放在App组件是完全合理的选择。如果后续应用规模扩大、状态逻辑变复杂，可以把Context相关逻辑抽成单独的自定义Hook或Context文件，让代码结构更清晰，但没必要将状态移出App组件。

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