面试 React 框架八股文十问十答第二期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）redux 的工作流程？

• 触发一个 action，通过调用 store.dispatch(action) 发起。
• Redux store 收到 action 后，通过 reducer 函数处理，生成新的 state。
• 订阅了 store 的组件会收到新的 state，从而更新视图。

2）react-redux 是如何工作的？

• react-redux 提供了 Provider 组件，它将 Redux store 传递给应用的所有组件。
• 使用 connect 函数将 React 组件连接到 Redux store，该函数接受两个参数：mapStateToProps 和 mapDispatchToProps，分别用于将 state 和 action 映射到组件的 props。
• 连接后的组件可以通过 props 直接访问 Redux store 的 state 和 dispatch 函数。

3）redux 中如何进行异步操作？

• 可以使用中间件来处理异步操作，最常见的是 redux-thunk、redux-saga 等。
• 使用 redux-thunk，action 可以是一个函数而不仅仅是一个对象。这个函数接受 dispatch 和 getState 作为参数，允许进行异步操作后再分发其他 action。

4）redux 异步中间件 redux-thunk 的优劣？

• 优点：
  • 简单易用，容易理解和上手。
  • 良好的社区支持，广泛应用于许多项目。
• 缺点：
  • 对于复杂的异步流程，可能会导致 action 创建函数嵌套过深，使代码难以维护。
  • 可能不如其他中间件处理一些复杂的异步场景。

5）合成事件是什么？

• 在 React 中，合成事件是指由 React 负责包装浏览器原生事件对象而创建的事件对象。React 在不同浏览器之间提供了一致的事件处理方式。
• 这样的设计使得 React 能够屏蔽底层浏览器的差异，提供一致性的事件接口，方便开发者编写跨浏览器的代码。React 的事件系统支持冒泡、捕获、委托等特性，同时也提供了合成事件对象的属性和方法。

6）React Hooks 原理？

• Hooks 是 React 16.8 引入的特性，允许函数组件内部使用 state、生命周期等 React 特性。它们是函数，可让你在不编写 class 的情况下使用 state 以及其他 React 特性。
• Hooks 本质上是一些 JavaScript 函数，通过调用 React 提供的特定函数（如 useState, useEffect, useContext 等）来在函数组件中使用 React 的功能。
• 这些 Hook 函数通过使用 React 内部的特殊机制来跟踪组件的状态和生命周期，并确保在组件重新渲染时状态保持不变。

7）为什么 ReactHooks 中不能有条件判断？

• Hooks 需要在每次渲染中按照相同的顺序被调用。如果在条件语句中使用 Hook，会导致调用顺序发生变化，违反了 React Hooks 的规则。
• 这会导致 React 在重新渲染时无法正确地追踪和处理状态的变化，因此条件判断内部使用 Hook 会引发错误。

8）用过哪些 Hook？

• useState: 用于在函数组件中添加状态。
• useEffect: 处理副作用，如数据获取、订阅、手动操作 DOM 等。
• useContext: 获取 React 上下文。
• useReducer: 可选的 state 管理方案，用于处理复杂的状态逻辑。
• useCallback 和 useMemo: 优化性能，避免不必要的重新渲染。

9）Class 组件 VS Hook

• Class 组件：使用传统的生命周期方法，包含较多的模板代码和状态管理逻辑，可读性较差。
• Hook：函数式组件更简洁、易读，通过提供各种 Hook，使得组件逻辑更为清晰，减少样板代码，更方便复用和测试。

10）自定义过哪些 Hook？

• 自定义 Hook 是指在函数中封装并抽象出可复用的逻辑。我可以帮你列举一些常见的自定义 Hook，比如处理表单逻辑、订阅事件、管理定时器等。