React组件通信方式

考察点分析 link

核心能力维度：React组件化设计能力、状态管理策略选择、框架API运用水平
技术评估点：

1. Props单向数据流机制的理解深度
2. 跨组件通信方案的场景适配能力
3. 状态管理工具选型的技术判断力
4. 对React设计哲学（单向数据流、组件隔离）的掌握程度
5. 性能优化意识（避免不必要的渲染、状态存储位置合理性）

技术解析 link

关键知识点 link

Props传参 > Context API > 状态提升 > Redux

原理剖析 link

1. Props传参：基于React单向数据流设计，父组件通过属性绑定传递数据，子组件通过props接收。函数作为prop可实现逆向通信（子调父）。
2. 状态提升：将共享状态提升到最近的共同祖先组件，通过props向下分发，适用于中等复杂度的兄弟组件通信。
3. Context API：通过Provider组件注入全局数据，Consumer组件或useContext钩子消费数据，避免多层透传props。
4. Redux：采用单一数据源，通过dispatch action触发状态更新，适用于复杂应用状态管理，配合中间件处理异步逻辑。

常见误区 link

• 在子组件直接修改props属性（应使用回调函数）
• Context滥用导致组件过度渲染（缺乏memoization优化）
• Redux过早优化导致架构复杂化（简单场景使用本地状态即可）

问题解答 link

父子组件通信 link

1. 父传子：父组件通过JSX属性传递数据，子组件通过props对象接收

     // 父组件
   <ChildComponent data={stateValue} /> 
   
   // 子组件
   function ChildComponent({ data }) {
     return <div>{data}</div>
   }
     

2. 子传父：父组件传递回调函数作为prop，子组件触发回调

     // 父组件
   const handleChildEvent = (data) => {...}
   <ChildComponent onEvent={handleChildEvent} />
   
   // 子组件
   <button onClick={() => onEvent(payload)}>
     

跨级组件通信 link

1. 状态提升：将共享状态移至共同父组件

     // 祖父组件
   const [sharedState, setSharedState] = useState()
   <Parent>
     <SiblingA state={sharedState} />
     <SiblingB onUpdate={setSharedState} />
   </Parent>
     

2. Context API：创建全局数据通道

     const AppContext = createContext();
   // 顶层组件
   <AppContext.Provider value={sharedValue}>
     <DeepChild />
   </AppContext.Provider>
   
   // 底层组件
   const value = useContext(AppContext)
     

3. Redux：集中式状态管理

     // Store配置
   const store = configureStore({
     reducer: { /*...*/ }
   })
   // 组件使用
   const data = useSelector(state => state.data)
   dispatch(actionCreator(payload))
     

解决方案 link

选择依据 link

深度追问 link

1. 如何避免Context导致的无效渲染？

   • 拆分Context为多个关注点分离的Provider
   • 使用memo+useMemo进行组件缓存

2. Redux Toolkit相比原生Redux有哪些改进？

   • 内置Immer处理不可变数据
   • 简化Reducer创建流程

3. HOC与Render Props如何用于组件通信？

   • 高阶组件通过属性代理传递数据
   • Render Props通过函数参数暴露状态