React
1.React18 有哪些更新？
2.JSX 是什么，它和 JS 有什么区别
3.简述 React 的生命周期
4.React 事件机制和原生 DOM 事件流有什么区别
5.Redux 工作原理
6.React-Router 工作原理? react-router-dom 有哪些组件
7.React hooks 解决了什么问题? 函数组件与类组件的区别
8.setState 是同步还是异步的，setState 做了什么
9.什么是 fiber，fiber 解决了什么问题
10.React 中在哪捕获错误？
11.React 组件传值有哪些方式
12.react 无状态组件和 class 类组件的区别
13.react 如何做到和 vue 中 keep-alive 的缓存效果
14.React 如何做路由监听
15.React 有哪几种方式改变 state
16.React 有哪几种创建组件方法
17.react 中 props 和 state 有什么区别
18.React 中 keys 的作用是什么？
19.React 中 refs 的作用是什么？
20.React diff 原理
React 的 diff 原理，也称为虚拟 DOM 的差异化比较算法，是 React 性能优化的核心机制之一。该原理通过对比新旧虚拟 DOM 树的差异，最小化对真实 DOM 的操作，从而提高页面渲染的性能。以下是 React diff 原理的详细解析：
一、基本概念
- 虚拟 DOM（Virtual DOM）：React 使用虚拟 DOM 来表示真实 DOM 树的状态。虚拟 DOM 是一个轻量级的 JavaScript 对象，它模拟了真实 DOM 的结构和属性。
- diff 算法：diff 算法是 React 用于比较新旧虚拟 DOM 树，找出差异并生成更新补丁的算法。
二、diff 原理的具体步骤
对比根节点：
- React 首先比较新旧虚拟 DOM 树的根节点。
- 如果根节点类型不同，React 将完全替换整个子树。
- 如果根节点类型相同，React 将继续对比子节点。
对比子节点：
- React 会逐层对比新旧虚拟 DOM 树的子节点。
- 使用唯一的 key 属性来标识列表中的每个子节点，并在同级节点中进行比较。
- 如果某个子节点在新旧虚拟 DOM 树中的相同位置，且其 key 和类型相同，则认为是相同节点，不进行更深层次的比较。
- 如果某个子节点在新旧虚拟 DOM 树中的相同位置，但其 key 或类型不同，则认为是不同节点，需要替换或重新创建。
递归对比子节点：
- 如果某个同级节点是相同节点，React 将继续递归对比其子节点。
- React 会记录新旧虚拟 DOM 树中相同位置的第一个子节点为起始点，并向右依次对比每个子节点。
- 当遇到不同节点时，则停止对比该节点及其后续节点。
更新和删除节点：
- 根据比较结果，React 可以确定需要更新、替换或删除的节点。
- 对于需要更新的节点，React 会更新其属性和内容。
- 对于需要替换的节点，React 会创建新的 DOM 节点来替换旧节点。
- 对于需要删除的节点，React 会从真实 DOM 中移除对应的节点。
三、diff 原理的优化策略
树层级（Tree Diff）：
- React 的 diff 算法会对树进行分层比较，即只比较同一层次的节点。
- 如果发现某个节点已经不存在，则该节点及其子节点会被完全删除，不会用于进一步的比较。
组件层级（Component Diff）：
- 对于同一类型的组件（引用一致），React 会按照原策略继续比较其 virtual DOM tree。
- 如果不是同一类型的组件，React 会将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
元素层级（Element Diff）：
- 当节点处于同一层级时，React 提供了三种节点操作：INSERT_MARKUP（插入）、MOVE_EXISTING（移动）和 REMOVE_NODE（删除）。
- 通过唯一 key 可以判断新老集合中是否存在相同的节点，并据此决定是执行插入、移动还是删除操作。
四、总结
React 的 diff 原理通过对比新旧虚拟 DOM 树的差异，并最小化对真实 DOM 的操作，从而提高了页面渲染的性能。这一原理的实现依赖于虚拟 DOM 的概念和 diff 算法的优化策略，包括树层级、组件层级和元素层级的比较和优化。通过使用 key 属性来标识列表中的每个子节点，React 能够更高效地复用和更新 DOM 节点，减少了不必要的 DOM 操作，提升了页面性能和用户体验。