React跨组件树传递Props能否不在父组件创建状态变量？

你对React单向数据流的基础规则理解是对的，但有一个常见误区：Context只要求Provider处于所有Consumer的组件树上层，并没有强制要求状态必须定义在两个子组件的公共父组件中。不需要在父组件创建状态就能实现同级组件跨树传值，有两类成熟的实现方案：

方案1：调整Provider挂载位置，在持有状态的子组件内完成上下文分发 #

如果要在某一个子组件内部创建状态，只需要让这个持有状态的子组件渲染时包裹Context.Provider，把需要消费状态的同级组件作为子节点传入即可，公共父组件不需要创建任何状态，甚至不需要感知共享逻辑的存在。
最简实现示例：

import { createContext, useContext, useState } from 'react'

// 单独抽离Context定义，供所有参与共享的组件引入
const SharedStateContext = createContext(null)

// 在子组件A内部创建状态，同时承担Provider的作用
function ChildA({ children }) {
  // 状态完全定义在ChildA内部，父组件不需要持有
  const [sharedData, setSharedData] = useState('初始共享值')
  return (
    <SharedStateContext.Provider value={{ sharedData, setSharedData }}>
      <div>我是创建状态的A组件：{sharedData}</div>
      {/* 渲染传入的同级消费组件 */}
      {children}
    </SharedStateContext.Provider>
  )
}

// 同级子组件B，直接消费Context
function ChildB() {
  const { sharedData, setSharedData } = useContext(SharedStateContext)
  return (
    <div>
      我是消费状态的B组件，拿到的值：{sharedData}
      <button onClick={() => setSharedData('B组件更新的值')}>修改共享状态</button>
    </div>
  )
}

// 公共父组件，不需要维护任何状态，仅调整组件嵌套结构即可
function Parent() {
  return (
    <div className="container">
      <ChildA>
        <ChildB />
      </ChildA>
    </div>
  )
}

这种方案本质是在React组件树层面把原来的同级关系，调整为「状态持有组件包裹消费组件」的结构，完全可以通过CSS布局让最终渲染的DOM保持视觉上的同级效果，状态的创建、分发逻辑全部收敛在持有状态的子组件内部，父组件无额外负担。

方案2：使用脱离组件树层级的外部状态 #

如果不想调整现有组件的嵌套结构，可以选择不依赖React组件树层级的外部状态方案，彻底摆脱Context的层级限制：

• 极简场景可以自己实现一个不足20行的发布订阅模块：在组件作用域外创建事件中心，状态持有组件更新时发布事件，消费组件挂载时订阅更新、卸载时取消订阅即可，不需要任何额外依赖。
• 常规业务场景推荐用无Provider依赖的轻量状态库，比如zustand，状态直接定义在组件外部，任意位置的组件不管层级关系如何，都可以直接读写状态，不需要在父组件套Provider，也不需要父组件维护任何状态。
  最简实现示例：

import { create } from 'zustand'

// 状态定义在所有组件外部，不依赖任何组件节点
const useSharedStore = create((set) => ({
  sharedData: '初始共享值',
  setSharedData: (val) => set({ sharedData: val })
}))

// 子组件A，读写状态
function ChildA() {
  const sharedData = useSharedStore(state => state.sharedData)
  return <div>A组件拿到的值：{sharedData}</div>
}

// 子组件B，和A完全同级，同样可以读写状态
function ChildB() {
  const { sharedData, setSharedData } = useSharedStore(state => state)
  return <button onClick={() => setSharedData('B更新的值')}>修改状态</button>
}

// 父组件不需要做任何状态相关处理，和普通写法完全一致
function Parent() {
  return (
    <div className="container">
      <ChildA />
      <ChildB />
    </div>
  )
}

注意：自行实现发布订阅时，一定要在组件卸载的useEffect清理函数中取消事件订阅，避免内存泄漏。

两类方案都可以完全满足不在父组件创建状态的需求：小型Demo、逻辑简单的场景用方案1零额外成本，中大型项目、跨组件共享逻辑多的场景用方案2维护性更好。

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