面试 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文章来源:https://www.toymoban.com/news/detail-784490.html
- Class 组件:使用传统的生命周期方法,包含较多的模板代码和状态管理逻辑,可读性较差。
- Hook:函数式组件更简洁、易读,通过提供各种 Hook,使得组件逻辑更为清晰,减少样板代码,更方便复用和测试。
10)自定义过哪些 Hook?文章来源地址https://www.toymoban.com/news/detail-784490.html
- 自定义 Hook 是指在函数中封装并抽象出可复用的逻辑。我可以帮你列举一些常见的自定义 Hook,比如处理表单逻辑、订阅事件、管理定时器等。
到了这里,关于面试 React 框架八股文十问十答第二期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!