面试 React 框架八股文十问十答第二期
面试 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，比如处理表单逻辑、订阅事件、管理定时器等。