7-19的六道题

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

在React生命周期中，有几个常见的坑需要注意：

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

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

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

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

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

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

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

# 2.说说Real diff算法是怎么运作的，从tree层到component层到element层分别讲解？

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

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

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

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

Real-DOM Diff算法通过这三个层次的比较，可以高效地找到需要更新的部分，并最小化实际DOM的变更。它还可以在Diff过程中生成一系列的DOM操作指令（例如增加节点、删除节点、更新节点属性等），然后将这些指令批量执行，从而进一步提高性能。

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

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

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

在React的生命周期中，`setState` 调用的时机对于组件的更新非常重要。通常，`setState` 调用会在组件的更新阶段之后触发，而不会立即生效。React会将多个 `setState` 调用合并成一个更新，以提高性能。

React 的组件更新过程大致如下：

1. 组件接收到新的 props 或调用了 `setState`。

2. React 会计划进行一次更新。

3. React 在下一个“调和阶段”（Reconciliation Phase）中比较虚拟DOM树的差异，以找出需要更新的部分。

4. React 更新真实DOM以反映新的虚拟DOM。

5. 组件的生命周期方法被调用（例如，`componentDidUpdate`）。

在上述过程中，`setState` 的调用触发了更新，但实际的DOM更新在下一个调和阶段中完成。

这种异步更新的机制是为了提高性能，因为它可以合并多个状态更新，减少不必要的DOM操作。但需要注意，`setState` 调用并不会立即改变组件的状态，因此如果你想在状态更新后执行某些操作，应该在 `componentDidUpdate` 生命周期方法中进行。

# 4.CSS3的新特性都有哪些？

  CSS3（Cascading Style Sheets 3）引入了许多新特性，以增强网页设计的灵活性和功能。以下是一些CSS3的新特性：

1. **选择器的增强**：CSS3引入了众多新的选择器，如通用兄弟选择器（`~`）、属性选择器（`[attr]`）、伪类选择器（`:nth-child`）、伪元素选择器（`::before`和`::after`）等。这些选择器提供更多的精确控制和灵活性。

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

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

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

5. **渐变**：CSS3支持线性渐变（`linear-gradient`）和径向渐变（`radial-gradient`），使背景颜色和图片渐变变得更加容易。

6. **多列布局**：`column-count`和`column-gap`等属性允许创建多列布局，使文本流更具吸引力。

7. **媒体查询**：媒体查询允许根据不同的设备、屏幕尺寸和特性来应用不同的CSS样式，从而实现响应式设计。

8. **动画和过渡**：CSS3引入了`@keyframes`规则和`transition`属性，用于创建动画和过渡效果，而不需要JavaScript。

9. **变换（Transforms）**：CSS3的`transform`属性允许对元素进行旋转、缩放、倾斜和平移操作。

10. **过渡（Transitions）**：`transition`属性允许在状态改变时平滑地过渡，以实现流畅的效果。

11. **2D和3D转换**：CSS3支持二维和三维的元素变换，包括旋转、缩放、移动和透视。

12. **字体处理**：引入了`@font-face`规则，允许使用自定义字体。

13. **多重背景图片**：可以为元素添加多个背景图像，通过逗号分隔它们。

14. **伪类选择器**：CSS3引入了众多伪类选择器，如`:nth-child`、`:not`等，用于选择DOM元素的不同状态或位置。

15. **Grid布局**：CSS Grid布局是一个强大的网格系统，用于创建复杂的布局结构。

这些特性使CSS更加强大和灵活，使开发者能够更轻松地实现各种设计和布局效果，同时提高了响应性和性能。不同浏览器对这些特性的支持程度可能有所不同，因此在使用时需要考虑兼容性。

# 5.说说redux的工作流程？

  Redux是一种用于管理JavaScript应用程序状态的库。它的工作流程可以总结为以下几个步骤：

1. **Action创建**：应用的各种操作和事件都会被抽象成一个个叫做"action"的普通JavaScript对象。这些对象描述了发生的事件，通常包括一个`type`属性来表示事件的类型，以及可选的其他数据。

2. **Dispatch**：当应用中的某个部分需要更新状态时，它会创建一个相关的action对象，然后将该对象传递给Redux的`store`。这是通过调用`store.dispatch(action)`来完成的。

3. **Reducer处理**：Redux的`store`将接收到的action对象传递给一个叫做"reducer"的纯函数。Reducer会根据action的类型来更新应用的状态。它接收先前的状态和action，然后返回一个新的状态。这一过程是纯函数，不会修改原始状态，而是返回一个新的状态副本。

4. **Store更新**：一旦Reducer返回了新的状态，Redux的`store`将更新应用的状态。

5. **通知订阅者**：Redux支持订阅者模式，因此一旦状态发生变化，所有已注册的监听器（或称为订阅者）都会被通知。这使得应用的各个部分可以监听状态的改变，以做出相应的响应。

6. **View更新**：React通常与Redux一起使用，以便将状态映射到UI组件上。当状态发生变化时，React会重新渲染相关的组件，从而更新用户界面。

Redux的工作流程强调了"单一数据源"（Single Source of Truth）的理念，即整个应用的状态被存储在一个单一的状态树中，这使得状态的管理变得可预测和可维护。通过分离状态的修改和UI的呈现，Redux提供了一种可维护和可测试的状态管理方法，特别适用于大型和复杂的应用程序。

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

  React合成事件是React框架提供的一种事件处理机制，用于处理DOM事件。合成事件是一种在原生浏览器事件系统之上构建的抽象，它有以下原理、好处和优势：

**原理**:

1. **事件委托**：React利用事件委托的原理，将所有事件监听器挂载到顶层容器（通常是`document`），而不是每个元素上。这样可以减少DOM元素上的事件监听器数量，提高性能。

2. **事件池**：React使用事件池来管理事件对象，这意味着事件对象在事件处理函数执行完毕后会被重用，而不是立即销毁。这减少了垃圾回收的压力，提高了性能。

**好处和优势**:

1. **性能优化**：React合成事件的事件委托和事件池机制有助于减少内存和性能开销。通过减少事件监听器数量和减少垃圾回收，提高了应用程序的性能。

2. **跨浏览器兼容性**：React合成事件屏蔽了不同浏览器之间的差异，使开发者不必担心浏览器兼容性问题。React会处理不同浏览器的事件差异，以确保一致的行为。

3. **事件委托**：React的事件委托机制允许你在组件树中处理事件，而不必在每个组件上都添加事件监听器。这样可以更容易管理事件处理逻辑，减少重复的代码。

4. **性能监测和调试**：React提供了开发者工具，可以用于监测和调试合成事件。你可以查看事件的详细信息，包括事件类型、事件目标和事件处理函数，以便更容易调试和分析应用程序的行为。

总的来说，React合成事件提供了一种高性能、一致性和易于调试的事件处理机制，使开发者可以更专注于应用程序的逻辑，而不必过多关注浏览器差异和性能优化。这有助于提高React应用程序的开发效率和用户体验。