【React】精选5题

1.React中为什么要给组件设置 key？

1. 提高渲染性能。

当组件列表中的某个组件的 key 值改变时，React 会将其视为一个新的组件，并重新渲染该组件，而不是仅仅修改其属性。这可以避免不必要的 DOM 操作，提高渲染性能。

2. 帮助 React 识别组件。

组件的 key 值是其唯一标识符，帮助 React 识别组件。当组件从列表中移除时，React 可以根据 key 值来判断哪些组件需要被移除。同时，在列表中添加、删除、修改组件时，key 值也可以帮助 React 正确地更新组件的状态，避免出现意外的渲染结果。

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。
在 React Diff 算法中React 会借助元素的 Key 值来判断该元素是新创建的还是被移动而来的元素，从而减少不必要的元素重新渲染。
此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系。

2. setState 之后发生了什么？

ChatGPT3.5：调用 setState() 后，React 会将传入的状态对象合并（Merge）到组件的当前状态中，并触发一次重新渲染（Re-render）。

具体地，React 会将新的状态对象与组件的当前状态对象进行浅合并，得到一个新的状态对象。然后，React 会判断新的状态对象是否与当前状态对象相等，如果相等，说明状态没有发生改变，不需要更新组件，否则需要更新组件。

当需要更新组件时，React 会执行以下操作：

1. 调用组件的 render() 方法，生成新的虚拟 DOM（Virtual DOM）树。

2. 将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，找出需要更新的部分。

3. 将需要更新的部分转换成真实 DOM 对象，并将其插入到页面中，更新页面的显示。

4. 触发组件的生命周期方法，如 componentDidUpdate() 等。

总之，调用 setState() 之后，React 会将新的状态对象合并到当前状态对象中，并触发一次重新渲染，更新页面的显示。

3. 在 shouldComponentUpdate 或 componentWillUpdate 中使用 setState 会发生什么？

在 shouldComponentUpdate 或 componentWillUpdate 中使用 setState 会导致组件更新的循环，也称为更新的死循环。
由于 setState 会触发组件的重新渲染，如果在shouldComponentUpdate 或 componentWillUpdate 中使用 setState，会导致组件不断地更新，直到内存耗尽或浏览器崩溃。因此，不建议在这两个生命周期方法中使用 setState。

4. react 的虚拟dom是怎么实现的？

React的虚拟DOM是通过一个JavaScript对象来表示一个真实DOM的层次结构，这个JavaScript对象被称为虚拟DOM节点。

React在渲染组件时，会生成一个虚拟DOM树，然后根据虚拟DOM树的变化来更新真实DOM树。当组件的状态发生变化时，React会生成一个新的虚拟DOM树，并将其与旧的虚拟DOM树进行比较，找出差异。然后React只会更新真正需要更新的部分，避免了对整个DOM树的重复操作，提高了性能。

在React中，每个虚拟DOM节点都包含了元素的标签名、属性、子元素等信息。React会根据这些信息来创建相应的真实DOM节点。虚拟DOM节点还包含一个指向其在DOM树中对应的真实DOM节点的引用，这样可以在更新真实DOM树时快速找到需要更新的节点。

总之，React的虚拟DOM是通过JavaScript对象来模拟真实DOM树的结构，并通过比较不同虚拟DOM树之间的差异来更新真实DOM树。

比如我们一个真是的 DOM 是这样的

<button class="myButton">
  <span>this is button</span>
</button>

那么在转化为 VM 之后就是这样的

{
  type: 'button',
  props: {
  	className: 'myButton',
    children: [{
      type: 'span',
      props: {
        type: 'text'
        children: 'this is button'
      }
    }]
  }
}

5. 为什么React的 VM 可以提高性能？

因为 VM 并不是真实的操作 DOM，通过 diff 算法可以避免一些不必要的 DOM 操作，从而提高了性能。

扩展 ：React中的VM 一定会提高性能吗？

React中的虚拟DOM并不是一定会提高性能的，而是在某些场景下可以提高性能。

虚拟DOM的优势在于它可以减少不必要的DOM操作，从而提高性能。当组件的状态发生变化时，React会生成一个新的虚拟DOM树，并将其与旧的虚拟DOM树进行比较，找出差异。然后React只会更新真正需要更新的部分，避免了对整个DOM树的重复操作，提高了性能。

但是，在一些简单的应用场景下，虚拟DOM的开销可能会超过其带来的性能提升。例如，当页面中只有少量DOM元素需要更新时，直接操作DOM可能比虚拟DOM更快。

因此，虚拟DOM并不是一定会提高性能的，而是需要根据具体的应用场景来选择是否使用虚拟DOM。在大型应用中，使用虚拟DOM更容易维护和扩展，同时也更容易实现优化。但在简单的应用中，使用虚拟DOM可能会引入不必要的性能开销。