React 状态管理面试题, React 的 Context API 有哪些主要属性?
React 状态管理面试题, React 的 Context API 有哪些主要属性?
QA
Step 1
Q:: React 的 Context API 有哪些主要属性？
A:: React 的 Context API 主要有以下几个关键属性：
1. **React.createContext()**: 这个方法用于创建一个新的 Context 对象。它接受一个默认值作为参数，并返回一个包含 Provider 和 Consumer 组件的对象。
2. **Provider**: Context 对象中的 Provider 组件用于为其子组件提供上下文。通过 value 属性，Provider 将上下文的值传递给其子组件树中的任何组件。
3. **Consumer**: Consumer 是一个可以订阅并获取上下文值的 React 组件。它使用 Render Prop 模式，接收当前的上下文值作为参数，并返回一个 React 元素。
4. **displayName**: 可以为 Context 对象设置 displayName，这样在 React 开发者工具中更容易识别。
Step 2
Q:: 如何使用 React 的 Context API？
A:: React 的 Context API 可以通过以下步骤使用：
1. **创建 Context**: 使用 React.createContext() 创建一个 Context 对象。例如：const MyContext = React.createContext(defaultValue);
2. **提供 Context**: 使用 Context 对象中的 Provider 组件，在组件树的上层传递 value 属性，例如：<MyContext.Provider value={someValue}>。
3. **消费 Context**: 在需要使用 Context 的组件中，使用 Consumer 组件或者 useContext 钩子来获取上下文的值，例如：const value = useContext(MyContext);。
Step 3
Q:: React Context API 和 Redux 有什么不同？
A:: React Context API 和 Redux 都是用来管理状态的，但它们有不同的使用场景和特性：
1. 状态管理范围：Context API 更适合于局部状态管理，通常用于轻量级的状态共享。而 Redux 则是一个全局状态管理工具，适合于管理复杂的、跨越多个组件的全局状态。
2. **复杂性**：Context API 是内置于 React 的功能，使用起来相对简单，没有外部依赖。Redux 则需要额外的库，并且通常与 React-Redux 配合使用，有较为复杂的配置和概念（如 reducer、action、store 等）。
3. 性能：Context API 在组件树很深、频繁更新状态时，可能会引起性能问题，因为每次 Provider 的 value 改变，都会导致整个子树重新渲染。Redux 通过 connect 高阶组件（或 useSelector 钩子）和 mapStateToProps，能更细粒度地控制组件的渲染，从而优化性能。