【精品问答】前端面试手册之React篇

React基础：

1. React的请求应该放在哪个生命周期中? 在React 16及以前版本，通常建议在componentDidMount生命周期方法中发起网络请求，因为这时组件已经挂载完成，可以安全地进行异步操作。而在React 16.3之后引入了新的生命周期方法，推荐使用useEffect Hook（对于函数组件）或在类组件中使用componentDidMount和componentDidUpdate组合来处理副作用，如网络请求。

2. setState到底是异步还是同步? setState方法在大多数情况下是异步的，这意味着调用它后，状态不会立即更新，而是被放入队列等待React决定何时执行更新以提高性能。但在某些特定情况，比如在事件处理器或useEffect的回调中直接调用，并且没有其他待处理的状态更新时，它可能会表现得像同步更新。

3. React组件通信如何实现？ 组件间通信有多种方式：

   • props：父组件向子组件传递数据。
   • Context API：用于跨层级组件间传递数据，避免props逐层传递。
   • State Management Libraries：如Redux、MobX，管理全局应用状态。
   • Custom Event/Event Bus：通过自定义事件机制实现非父子关系组件间的通信。
   • React Hooks：如useContext, useReducer, useCallback等，为函数组件提供状态管理和复用逻辑的能力。

4. React如何进行组件/逻辑复用?

   • 高阶组件(HOC)：通过函数包裹原有组件，注入新属性或修改行为。
   • Render Props：将部分UI逻辑作为prop传递给组件，使组件更灵活。
   • Hooks：自React 16.8起，提供了useState, useEffect等，使得逻辑复用不再依赖于类组件。
   • Function Components: 直接通过函数式编程的方式编写可复用的UI组件。

5. redux的工作流程? Redux的工作流程包括：

   • Action：表示用户交互触发的事件，是一个普通的JavaScript对象。
   • Reducer：纯函数，根据当前state和action返回新的state。
   • Store：保存应用状态的容器，包含所有reducer并管理应用状态。
   • Dispatch：发送一个action到store，触发reducer计算新的state。

6. react-redux是如何工作的? react-redux库提供了与Redux结合使用的React绑定，主要通过Provider组件将store注入到React组件树中，以及connect函数来连接React组件与Redux store，使得组件能获取到store中的state并通过dispatch触发actions。

7. redux与mobx的区别?

   • Redux：强调单一数据源和不可变数据，使用reducers和actions管理状态，适合大型项目，但可能带来较多的样板代码。
   • MobX：基于观察者模式，自动追踪依赖，自动更新视图，代码更简洁直观，适合快速迭代的小到中型项目。

8. redux中如何进行异步操作? 异步操作通常通过中间件实现，最常用的是redux-thunk或redux-saga：

   • Redux Thunk：允许action creator返回一个函数，这个函数可以接收dispatch方法作为参数，从而实现异步操作。
   • Redux Saga：采用Generator函数，通过监听action执行副作用操作（如API调用），然后dispatch新的action来更新state。

React进阶：

1. React最新的生命周期是怎样的？ React 16.3以后逐步废弃了旧的生命周期方法，推荐使用新的生命周期，特别是对于函数组件，引入了useEffect、useLayoutEffect等Hook替代。对于类组件，getDerivedStateFromProps和getSnapshotBeforeUpdate是新增的静态生命周期方法，而componentWillMount、componentWillReceiveProps、componentWillUpdate则被标记为不安全并最终废弃。

2. React有哪些优化性能的手段?

   • PureComponent/React.memo：减少不必要的渲染。
   • shouldComponentUpdate：手动控制是否需要重新渲染。
   • React.lazy & Suspense：懒加载组件，提升首屏加载速度。
   • Virtual DOM：最小化DOM操作，提高效率。
   • Fiber架构：细粒度调度，优化更新过程。

3. mixin、hoc、render props、react-hooks的优劣如何？

   • Mixins：已被React社区弃用，因引入复杂性、冲突问题。
   • HOCs：强大且灵活，但可能导致组件层次过深，难以理解。
   • Render Props：易于理解和重用，但可能导致组件嵌套复杂。
   • React Hooks：简化组件逻辑，增强函数组件能力，降低耦合，成为React推荐的最佳实践。

4. 你是如何理解fiber的? Fiber是React 16引入的一个核心算法，它改变了React的内部工作方式，实现了任务的分片（Time Slicing）和优先级调度，使得React能够中断渲染过程去处理更高优先级的任务，提高了UI响应性和整体性能。

5. 你对Time Slice的理解? Time Slicing是Fiber架构的一部分，它允许React在执行渲染任务时“切片”时间，即在每个宏任务中只执行一定量的工作，然后将控制权交还给浏览器，这样可以避免长时间阻塞主线程，保证UI的流畅性，特别是在复杂的UI更新场景下。

6. redux异步中间件之间的优劣?

   • Redux Thunk：简单易用，适用于简单的异步逻辑，但当异步流变得复杂时，代码可读性和维护性会下降。
   • Redux Saga：功能强大，支持复杂的异步流控制，易于测试，但学习曲线较陡峭，增加了项目的复杂度。
   • Redux Observable：基于RxJS，提供了强大的响应式编程能力，灵活性极高，但同样要求开发者熟悉RxJS，增加了学习成本。

选择哪种异步中间件取决于项目需求、团队熟悉度以及对复杂性的容忍度。