前端面试题其（一）

1.对fiber架构的理解？解决了什么问题？

        Fiber 架构是 React 16 引入的一种新的协调算法和架构设计，主要用于解决 React 在处理大型应用时可能遇到的性能问题，以及支持更好的交互和动画体验。

Fiber 架构的理解：

1. 协调算法的改进：

   • Fiber 架构重新设计了 React 的协调算法。传统的栈调用方式在处理大型组件树时可能导致长时间的 JavaScript 执行，造成页面卡顿或者动画不流畅。Fiber 引入了可中断的、优先级的虚拟 DOM 渲染流程，使得 React 可以更灵活地中断当前任务、优先处理高优先级任务，从而更好地响应用户输入和动画需求。

2. 增量渲染：

   • Fiber 架构支持增量渲染，即将渲染过程分解为多个单元（fiber），并且可以在每个单元执行后暂停、中断或者重新启动。这种方式可以有效地分配渲染时间，避免长时间的渲染阻塞。

3. 更好的控制渲染优先级：

   • Fiber 允许 React 明确地控制每个任务的优先级，例如响应用户输入、处理动画或者更新数据等不同场景可以有不同的优先级，从而提供更好的用户体验。

4. 更好的错误边界：

   • Fiber 架构通过分阶段处理、增强的错误处理机制，使得 React 可以更容易地捕获和处理异常，避免整个组件树的崩溃。

解决的问题：

1. 性能优化：

   • Fiber 架构的引入显著提高了 React 应用的性能表现。通过增量渲染、优先级控制等技术，可以减少不必要的渲染操作，提升页面的响应速度和用户体验。

2. 更流畅的动画和交互：

   • 传统的 React 渲染方式可能导致动画卡顿或者用户交互响应不及时的问题。Fiber 的设计使得 React 能够更好地处理动画和用户输入，从而实现更加流畅的用户界面动画效果。

3. 更灵活的异步渲染：

   • Fiber 的可中断性和增量渲染使得 React 在处理大型组件树时更加灵活，能够根据不同情况动态调整渲染的优先级，保证用户体验的稳定性和流畅性。

---

2.对redux中间件的理解？常用的中间件有哪些？实现原理？

        Redux 中间件是一个扩展点，允许在 Redux 的 dispatch 被触发后，到达 reducer 处理之前，自定义处理逻辑。它可以拦截、检查、转换或异步处理 dispatch 的 action，从而实现一些高级的功能.

常用的 Redux 中间件：

1. redux-thunk：

   • 允许 action 创建函数返回函数而不是普通的 action 对象，可以处理异步逻辑。在函数体内可以进行异步操作，最终 dispatch 真正的 action 对象给 reducer。

2. redux-saga：

   • 使用 Generator 函数来处理副作用，例如异步调用和访问浏览器缓存。通过监听特定的 action 类型来触发 Saga，它可以阻塞或者等待异步操作完成后再继续执行。

3. redux-logger：

   • 用于记录每个 action 和 state 变化，便于开发者调试和分析 Redux 应用的行为。

4. redux-thunk：

   • 允许 action 创建函数返回一个函数，而不是普通的 action 对象。这个函数可以进行异步操作，并在完成后 dispatch 普通的同步 action。

5. redux-persist：

   • 用于将 Redux 的 state 持久化到本地存储中，以便在页面刷新后能够恢复状态。

Redux 中间件的实现原理：

Redux 的中间件本质上是对 dispatch 方法的增强和扩展。它通过改写 store.dispatch 方法，使其在 action 到达 reducer 之前经过中间件的处理。

实现步骤：

1. 接受一个 store 参数，可以获取当前的 state 和 dispatch 方法。
2. 返回一个函数，这个函数接受 next 参数，表示下一个中间件的 dispatch 方法或者最终的 reducer 的 dispatch 方法。
3. 在返回的函数内部，返回一个新的函数，这个函数接受 action 参数，处理中间件逻辑，最终可以选择调用 next(action) 将 action 传递给下一个中间件或者 reducer。
4. 中间件可以在处理过程中决定是否调用 next(action)，或者在调用前后做一些额外的处理，如异步操作、日志记录、异常捕获等。

---

3.如何使用css实现一个三角形？

        

        方案一：利用边框和透明属性

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f00; /* 控制三角形的大小和颜色 */
}

        方案二：利用 transform 属性

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #0f0;
  transform: rotate(180deg); /* 旋转180度使得三角