React 进阶面试题, 组件设计
React 进阶面试题, 组件设计
QA
Step 1
Q:: 什么是React中的高阶组件（Higher-Order Component, HOC）？
A:: 高阶组件（HOC）是一种基于React的组合模式的高级技术。HOC 是一个函数，接受一个组件作为参数，并返回一个新的组件。高阶组件可以用于复用组件逻辑，处理跨组件的关注点，如权限控制、数据预处理等。
Step 2
Q:: 在什么场景下会使用高阶组件？
A:: 高阶组件通常用于以下场景：当多个组件需要共享相同的逻辑时；当你想在组件中添加权限验证逻辑；或者当需要实现逻辑分离时，比如在数据获取、用户认证、操作日志等场景下。
Step 3
Q:: React 组件生命周期中的各个阶段分别是什么？
A:: React 组件生命周期包括：1. 装载阶段（Mounting）：constructor()、getDerivedStateFromProps()、render()、componentDidMount()；2. 更新阶段（Updating）：getDerivedStateFromProps()、shouldComponentUpdate()、render()、getSnapshotBeforeUpdate()、componentDidUpdate()；3. 卸载阶段（Unmounting）：componentWillUnmount()。
Step 4
Q:: 在React中，如何处理组件之间的状态共享？
A:: 处理组件之间的状态共享，可以使用以下方法：1. 提升状态（Lifting State Up）：将共享的状态提升到最近的共同父组件；2. 使用Context API：通过React的Context API可以在组件树中传递数据，而无需逐层传递props；3. 使用状态管理库：如Redux、MobX等，在全局状态中管理组件间的共享状态。
Step 5
Q:: React 中的 Hooks 是什么？列举一些常用的 Hooks 并解释它们的用途。
A:: Hooks 是 React 16.8 引入的一种新特性，它让你在不编写 class 的情况下使用状态和其他 React 特性。常用的 Hooks 包括：useState（管理状态）、useEffect（副作用处理，如数据获取）、useContext（访问上下文）、useReducer（复杂状态逻辑处理）、useRef（访问DOM节点或保存可变值）。
Step 6
Q:: 如何优化React应用的性能？
A:: 可以通过以下方式优化React应用的性能：1. 使用React.memo或PureComponent防止不必要的重新渲染；2. 使用useCallback和useMemo缓存函数和计算结果；3. 懒加载组件（使用React.lazy和Suspense）；4. 代码拆分（Code Splitting）；5. 避免匿名函数和内联函数的滥用；6. 合理使用键值（key）；7. 采用虚拟滚动技术处理长列表。