前端经典面试题合集, React 组件间怎么进行通信?
前端经典面试题合集, React 组件间怎么进行通信?
QA
Step 1
Q:: React 组件间怎么进行通信？
A:: React 组件间的通信可以通过以下几种方式进行：
1. **Props**: 父组件通过 props 向子组件传递数据和回调函数。
2. **Context**: 通过 Context API 在组件树中传递数据，而不需要逐层传递 props。
3. **Redux**: 使用 Redux 进行全局状态管理，将状态和逻辑集中在一个 store 中，组件通过连接 store 获取和修改状态。
4. **Callback 函数**: 父组件通过 props 将回调函数传递给子组件，子组件通过调用回调函数将数据传回父组件。
5. **Event Emitter**: 使用事件机制进行组件间通信，常见于复杂的非父子关系组件间通信。
6. **Refs**: 在必要时通过 refs 直接访问子组件的方法或属性。
Step 2
Q:: 什么是 React 的 Context API？
A:: Context API 是 React 提供的一种机制，用于在组件树中传递数据，而无需通过逐层的 props 传递。它由 React.createContext() 创建一个上下文对象，然后通过 Provider 组件将数据传递给子组件，通过 Consumer 或 useContext 钩子来读取数据。Context 常用于全局数据如主题、用户信息等的传递。
Step 3
Q:: Redux 是什么，它是如何工作的？
A:: Redux 是一个用于 JavaScript 应用的状态管理库，通常与 React 结合使用。它通过一个单一的 store 保存整个应用的状态，并且状态只能通过派发(action)来进行修改。Redux 的核心原则包括：
1. **单一数据源**: 应用的所有状态都存储在一个对象树中，并且这个对象树只存在于唯一一个 store 中。
2. **状态是只读的**: 唯一修改状态的方法是触发 action，对象树不会被直接修改。
3. **使用纯函数来执行修改**: Reducers 是纯函数，它接收当前的状态和 action，并返回新的状态。