- 正确答案：React组件通信主要包括父子组件通信、子父组件通信、跨层级组件通信和非关系组件通信四种模式。常用方式包括：通过props传递数据和回调函数实现父子/子父通信，使用Context进行跨层级通信，利用自定义事件或状态管理工具（如Redux、MobX）实现全局或非关系组件通信。 - 解答思路： 1. 首先明确React是单向数据流框架，数据流动方向是从父到子。 2. 父子通信最简单，直接通过props传值。 3. 子父通信可通过父组件传递一个回调函数给子组件，子组件调用该函数来“向上传递”信息。 4. 跨层级或多层嵌套组件可使用Context API避免“props drilling”。 5. 复杂应用中多个不相关组件间通信推荐使用状态管理库（如Redux）。 6. 特殊场景下也可使用事件总线或ref转发等技术。 - 深度知识讲解： 1. props与回调函数（父子 & 子父通信）这是最基础的通信方式。父组件将数据作为props传入子组件；若需子组件影响父组件状态，则父组件传递一个更新状态的函数（回调）给子组件。示例场景：表单输入框（子）通知父组件值变化。实现原理：JavaScript闭包机制使得子组件可以持有并调用父组件的作用域函数。代码示例： ``` function Parent() { const [count, setCount] = useState(0); const handleIncrement = () => setCount(count + 1); return ; } function Child({ onIncrement, currentCount }) { return (

当前计数: {currentCount}

); } ``` 2. Context API（跨层级通信）当组件嵌套较深时，逐层传递props效率低且难以维护。Context允许创建一个可被后代组件访问的数据通道。底层机制：React内部维护一个上下文栈，在组件树渲染过程中，Provider组件会将其值压入栈中，Consumer或useContext读取最近的Provider值。创建流程： - 使用React.createContext(defaultValue) - 上层组件用Context.Provider包裹后代，并传入value - 后代组件通过useContext(Context)获取值代码示例： ``` const ThemeContext = React.createContext('light'); function App() { return ( ); } function Toolbar() { return ; } function ThemedButton() { const theme = useContext(ThemeContext); return ; } ``` 注意事项：Context会导致组件复用性下降，应仅用于真正需要共享的状态（如主题、用户登录状态）。频繁更新的context可能引发性能问题，建议配合React.memo或拆分context。 3. 状态管理库（Redux为例） Redux提供全局唯一的store存储状态，所有组件可通过订阅store变化来响应数据更新。核心概念： - Store：单一状态树 - Action：描述状态变更的对象 { type, payload } - Reducer：纯函数 (state, action) => newState - Dispatch：触发action的方法工作流程：组件dispatch(action) → store调用reducer生成新state → 所有订阅者更新视图 Redux与React集成通常使用react-redux库，提供Provider注入store和useSelector/useDispatch钩子。代码示例： ``` // 定义reducer const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; // 组件中使用 function Counter() { const count = useSelector(state => state); const dispatch = useDispatch(); return ( <>

{count}

); } ``` 原理剖析：react-redux利用Context传递store，但通过优化手段（如selector比较）避免不必要的重渲染。useSelector内部实现了浅比较，只有当selected值变化时才触发更新。 4. 其他通信方式 a. 事件总线（EventEmitter）使用第三方库如mitt或Node.js events模块创建全局事件系统。缺点：容易造成内存泄漏、调试困难、违反React数据流原则，不推荐在大型项目中使用。示例： ``` import mitt from 'mitt'; const emitter = mitt(); // 组件A发送事件 emitter.emit('update-user', user); // 组件B监听事件 useEffect(() => { emitter.on('update-user', handleUserUpdate); return () => emitter.off('update-user', handleUserUpdate); }, []); ``` b. Ref转发 + 实例方法使用React.forwardRef将ref从父传至子DOM或组件实例，调用其暴露的方法。适用于命令式操作（如focus、动画控制），不适合常规状态通信。示例： ``` const ChildInput = forwardRef((props, ref) => { return ; }); function Parent() { const inputRef = useRef(); const focusInput = () => inputRef.current.focus(); return ( <> ); } ``` c. URL参数或LocalStorage 利用浏览器持久化机制进行通信，适合页面刷新后仍需保留的状态，或不同标签页间通信（配合storage事件）。总结对比： - 小型应用：优先使用props和回调 - 中大型应用：结合Context + useReducer管理局部复杂状态，全局状态用Redux/Zustand - 高频更新状态：注意避免context导致的全量重渲染，考虑拆分context或使用局部状态提升 - 函数组件本质是闭包，每次渲染都有独立的props和state快照，这是理解通信行为的关键面试加分点： - 提到React 18并发模式下，Context的更新可能会被中断重试，因此reducer和context value应保持幂等性和无副作用 - 使用useReducer + Context替代Redux处理中等复杂度状态，减少依赖 - 解释为什么不能直接修改props（违反不可变性原则） - 强调“提升状态”是React推荐的共享状态解决方案之一

行至智能一面挂

全站热榜

创作者周榜