前端相关的一些问题-优快云博客

本文链接：https://blog.youkuaiyun.com/iL_05_03/article/details/140717888

1.说说Real-Diff 算法是怎么运作的？从tree层到component层到element层分别讲解？

Real-DOM-Diff算法，通常称为Virtual DOM Diff算法，是React使用的一种高效的算法，用于比较两个虚拟DOM树（Virtual DOM Tree）之间的差异，并最小化对实际DOM的更新，从而提高性能。这个算法分为三个层次：Tree层、Component层、Element层。

Tree层：在Tree层，Real-DOM Diff算法比较两个虚拟DOM树的根节点。它首先检查两个根节点是否具有相同的类型（例如，两者都是div元素），如果类型相同，则进一步比较其属性。如果类型和属性都相同，React会认为这两个根节点是相同的，不需要进行任何更新。如果类型不同或属性不同，React将认为需要替换整个根节点，从而触发实际DOM的更新。

Component层：在Component层，React比较两个虚拟DOM树中的组件（Component）。React会递归地遍历组件的子节点，并比较它们之间的差异。如果两个组件的类型相同，React会继续比较它们的属性和子组件。如果属性相同，但子组件不同，React会递归比较子组件。如果属性不同，React将认为需要更新该组件及其子组件。这样，React会在尽可能深的层次上查找差异，以最小化实际DOM的更新。

Element层：在Element层，React比较两个虚拟DOM树中的叶子元素（Element）。React会比较元素的类型、属性和文本内容。如果这些都相同，React将认为两个元素是相同的，不需要更新。如果有差异，React将更新实际DOM以反映这些差异。

总的来说，Real-DOM Diff算法是React的核心之一，它使React能够高效地管理和更新DOM，提供了快速响应用户交互的能力，同时尽可能减少了不必要的DOM操作，提高了性能。

2.说说React 生命周期中有哪些坑？为什么要移除will相关生命周期？

存在的坑有：

1.不正确使用componentDidMount和componentDidUpdate：应该尽量避免在这里进行复杂的操作，可以考虑使用异步操作或放在其他生命周期中处理

2.避免频繁使用setState：如果频繁调用setState可能导致性能问题

3.不要直接修改this.state：应该避免直接修改组件状态的方式，而是使用setState函数来更新状态。

溢出will相关的生命周期函数得主要原因是：

1.React团队认为这些函数的命名容易误导开发者，并且可能导致一些问题

2.在17版本中标记will相关的生命周期函数为过时

3.弃用will相关的生命周期函数是为了提升开发者的开发体验和避免潜在的问题

3.调和阶段setState干了什么？

在React中，setState 是用来更新组件的状态（state）的方法之一。当调用 setState 时，React 将触发组件的重新渲染，以反映新的状态。React会将新的状态与旧的状态合并，而不是完全替换它。

React 会进行以下几个主要步骤：

触发重新渲染：setState 方法调用后，React 会将组件标记为"脏"，即需要进行更新。这意味着React将会在适当的时机重新渲染该组件及其子组件。
比较虚拟DOM：在重新渲染之前，React会对当前虚拟DOM树（Virtual DOM）进行比较，找出哪些地方发生了变化。
计算差异：React会计算出当前虚拟DOM与上一次渲染时的虚拟DOM之间的差异（diff）。这是通过比较两棵虚拟DOM树的节点来完成的。
更新DOM：一旦计算出差异，React会将这些变更批量应用到实际的DOM上，以使之与虚拟DOM保持一致。
生命周期方法调用：在更新完DOM之后，React会调用适当的生命周期方法（如 componentDidUpdate），使开发人员有机会在更新之后执行额外的操作

4.说说css3的新特性有哪些？

1.盒子模型：css3引入了box-sizing属性，允许开发者控制盒子模型的计算方式，包括box-sizing和border-sizing。

2.圆角边框：使用border-radius属性，可以轻松创建圆角边框，而不再需要使用背景图片或其他技巧。

3.阴影效果：引入了box-shadow属性，可以为元素添加投影效果。

4.渐变：css3支持线性渐变和径向渐变，使背景颜色和图片渐变变得更加容易。

5.说说redux的工作流程？

Redux是一种用于管理JavaScript应用程序状态的库。

工作流程是：

创建 Store：首先，需要创建一个 Redux Store，用于存储应用的状态。可以使用 createStore 函数来创建 Store，并传入一个 Reducer 函数作为参数。
定义Reducers：Reducer 是一个纯函数，用于根据动作（Action）来更新状态。每个 Reducer 对应一个状态字段，它接受两个参数：当前状态和动作。根据动作的类型和数据，Reducer 返回新的状态。
发送 Actions：Actions 是用于描述状态更改的对象，它包含一个类型（type）和一个数据（payload）。可以通过调用 store.dispatch 方法来发送 Actions。
更新 State：当发送一个 Action 时，Store 会调用相应的 Reducer，并将当前状态和动作作为参数传递给 Reducer。Reducer 返回的新状态将被更新到 Store 中。
使用 State：可以通过访问 store.getState() 方法来获取当前的应用状态。
监听 State 更新：可以使用 store.subscribe() 方法来监听 State 的更新。当 State 发生变化时，会触发回调函数。

6.React合成事件的原理，有什么好处和优势？

React合成事件是React框架提供的一种事件处理机制，用于处理DOM事件。

原理是：

事件委托：React利用事件委托的原理，将所有事件监听器挂载到顶层容器（通常是document）上，而不是每个元素上。这样可以减少DOM元素上的事件监听器数量，提高性能。
事件池：React使用事件池来管理事件对象，这意味着事件对象在事件处理函数执行完毕后会被重用，而不是立即销毁。这减少了垃圾回收的压力，提高了性能

好处和优势:

1、性能优化 2、跨浏览器兼容性 3、性能监控和调试

7.为什么 react 元素会有一个$$type属性？

React 元素在内部会有一个 $$typeof 属性，而不是 $$type 属性。这个 $$typeof 属性是 React 内部用来标识对象是否是一个有效的 React 元素的一种机制，它的存在主要是为了防止某些类型的对象被误认为是 React 元素，从而导致潜在的错误。

具体来说，React 使用 $$typeof 属性来代表一个特定的 Symbol 值，这个 Symbol 值在不同的 React 版本中可能会有所不同。它的作用是在进行元素类型检查时，确保只有符合 React 元素结构的对象才会被正确处理和渲染。

这种设计是为了增强 React 应用的健壮性和安全性。通过 $$typeof 属性，React 在内部可以轻松地识别和区分合法的 React 元素对象和普通的 JavaScript 对象，避免了不必要的错误和异常情况。

总结来说，$$typeof 属性是 React 内部用来标识 React 元素的一种机制，确保在处理和渲染 React 元素时能够正确识别其结构和类型。

8.React有哪些优化性能的手段？

使用虚拟 DOM: React 使用虚拟 DOM 技术来减少对实际 DOM 的直接操作次数。通过比较虚拟 DOM 的变化，React 能够有效地计算出最小化的 DOM 更新，从而提升渲染效率。
组件的 shouldComponentUpdate 方法: 通过实现 shouldComponentUpdate 生命周期方法，开发者可以控制组件是否需要重新渲染。在该方法中，可以比较当前的 props 和 state 与下一个 props 和 state，决定是否更新组件。这种优化方式避免了不必要的渲染操作，提高了性能。
使用 PureComponent 或 React.memo: 对于纯函数组件或类组件，可以使用 PureComponent 或 React.memo 来自动进行 shouldComponentUpdate 的浅比较优化。这些工具帮助组件在 props 没有变化时避免重新渲染。
避免不必要的重新渲染: 在组件开发过程中，尽量避免在 render 方法中做复杂的计算或者频繁地创建新的对象，以减少不必要的渲染操作。可以通过将计算结果缓存起来或者提升状态到更高层级的组件来避免这些问题。

9.说说你对fiber架构的理解？解决了什么问题？

Fiber 架构主要解决了传统 React 渲染模型中的性能瓶颈、用户交互体验不佳以及错误处理不完善等问题。它通过引入异步渲染、增量渲染和优先级控制等特性，使得 React 应用在大型和复杂场景下能够更高效、更灵活地运行和渲染，从而提升了整体的用户体验和开发效率。

解决了什么问题？

1.增强了渲染的灵活性和优先级控制

2.支持增量渲染

3.更好的错误边界和异常处理

4.更好的调试能力

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

Redux中间件是一种用于扩展Redux的功能的机制，它允许你在Redux的dispatch过程中添加自定义的逻辑。中间件在Redux应用中的常见用途包括异步操作、日志记录、路由导航、状态持久化等。通过中间件，你可以在action被派发到reducer之前或之后执行一些额外的操作，以满足不同的需求。

常用的中间件有：redux-thunk、redux-saga、redux-logger、redux-promise