React子组件加载与更新时更新Context，避免无限重渲染

问题场景 #

现有如下实现逻辑：

1. 创建Context存储状态与更新方法：

const TestContext = React.createContext('hello')

2. 父组件通过useState维护嵌套对象状态，并用Provider传递给子组件：

const [testState, setTestState] = React.useState({})

<TestContext.Provider value={[testState, setTestState]}>
  <TestComponentOne />
  <TestComponentTwo />
</TestContext.Provider>

3. 两个子组件需求：
   • TestComponentOne：加载时向Context添加testVar1，并根据testVar2是否存在展示对应内容
   • TestComponentTwo：加载时向Context添加testVar2，并根据testVar1是否存在展示对应内容

原实现中，子组件的useEffect无论依赖testState、空数组还是无依赖，都会出现无限循环或无法感知其他组件更新的问题。

核心原因 #

• 依赖testState时，任意子组件更新Context后，testState引用变化会触发所有子组件的useEffect，导致互相触发更新，形成无限循环
• 空依赖数组仅在组件初始化时执行一次，无法感知其他组件对Context的后续更新
• 更新逻辑未加判断条件，每次都会重复修改状态，触发不必要的重渲染

解决方案 #

通过函数式更新获取最新状态，并在更新前添加存在性检查，确保仅当目标key不存在时才执行更新，避免重复触发状态变更；同时让组件能自动感知Context的所有更新，正确展示内容。

修改后的子组件代码 #

TestComponentOne

const TestComponentOne = () => {
  const [testState, setTestState] = React.useContext(TestContext)

  const GetTestVar = () => {
    return 'testVar2' in testState ? <h1>Success</h1> : <h1>Not yet...</h1>
  }

  React.useEffect(() => {
    // 函数式更新获取最新状态，无需依赖当前testState快照
    setTestState(prevState => {
      // 仅当testVar1不存在时才更新状态
      if (!('testVar1' in prevState)) {
        return {...prevState, testVar1: "testVar1"}
      }
      // 无需更新时返回原状态，避免触发重渲染
      return prevState
    })
  }, [setTestState]) // setTestState是React保证的稳定引用，作为唯一依赖

  return <div>{GetTestVar()}</div>
}

TestComponentTwo

const TestComponentTwo = () => {
  const [testState, setTestState] = React.useContext(TestContext)

  const GetTestVar = () => {
    return 'testVar1' in testState ? <h1>Success</h1> : <h1>Not yet...</h1>
  }

  React.useEffect(() => {
    setTestState(prevState => {
      if (!('testVar2' in prevState)) {
        return {...prevState, testVar2: "testVar2"}
      }
      return prevState
    })
  }, [setTestState])

  return <div>{GetTestVar()}</div>
}

关键优化点 #

1. 函数式更新：通过setTestState(prevState => ...)获取最新状态，无需依赖当前testState，避免因状态引用变化触发不必要的useEffect执行
2. 存在性检查：仅当目标key不存在于状态中时才更新，确保每个组件只执行一次必要的状态修改，不会重复触发状态变更
3. 稳定依赖：useEffect仅依赖setTestState，它是React保证的稳定引用，不会导致不必要的重渲染
4. 自动感知更新：组件会因Context中testState的变化自动重渲染，从而正确展示根据其他组件更新后的状态生成的内容

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