react原理

----------------------爆肝整理---------------------------

react 16
参考文献：
参考文档
react 18

react 16

发布时间：2017 年
新增 API 和特性： Fiber 架构：重写了 React 的核心算法。 Error Boundaries：通过 componentDidCatch 方法捕获子组件错误。 Fragment：使用 <React.Fragment> 或 <> 创建组合组件。 Portals：使用 ReactDOM.createPortal 在父组件 DOM 层次之外渲染组件。 自定义 DOM 属性：支持传递未知的 HTML 属性到 DOM。 更好的服务端渲染：通过 ReactDOMServer.renderToNodeStream 支持流式渲染。 Context API：完全重写的新上下文 API (React.createContext)。

react 17

发布时间：2020 年，作为react 18 的过渡版本，官方发布日志称react17最大的特点就是无新特性，这个版本主要目标是让React能渐进式升级。
新增 API 和特性： 事件委托的改变：React 17 将事件处理程序的委托方式从 document 更改为 React 根节点。 新的 JSX 转换：引入了新的 JSX 转换逻辑，可以在不引入 React 的情况下使用 JSX。 React 17 没有引入太多面向开发者的新 API，主要专注于内部改进和为未来版本做准备。

1. 去除事件池
   在React17之前，如果使用异步的方式来获取事件e对象，会发现合成事件对象被销毁，如下：
   function App() {
   const handleClick = (e: React.MouseEvent) => {
   console.log(‘直接打印e’, e.target) // React事件池
   // v17以下在异步方法拿不到事件e，必须先调用 e.persist()
   // e.persist()

   // 异步方式获取事件e
   setTimeout(() => {
   console.log(‘setTimeout打印e’, e.target) // null
   })
   }
   return (

   React事件池

)
}

如果你需要在事件处理函数运行之后获取事件对象的属性，你需要调用 e.persist()，它会将当前的合成事件从事件池中删除，并允许保留对事件的引用。
事件池：合成事件对象会被放入池中统一管理。这意味着合成事件对象可以被复用，当所有事件处理函数被调用之后，其所有属性都会被回收释放置空。
事件池的好处是在较旧浏览器中重用了不同事件的事件对象以提高性能，但它对现代浏览器的性能优化微乎其微，反而给开发者带来困惑，因此去除了事件池，因此也没有了事件复用机制。
function App() {
// v17 去除了 React 事件池，异步方式使用e不再需要 e.persist()
const handleClick = (e: React.MouseEvent) => {
console.log(‘直接打印e’, e.target) // React事件池

setTimeout(() => {
  console.log('setTimeout打印e', e.target) // <button>React事件池</button>
})

}
return (

React事件池

)
}
2. 事件委托到根节点上
react 17前，React 将事件委托到 document 上，在react17中，则委托到根节点
const rootNode = document.getElementById(‘root’);
ReactDOM.render(, rootNode);
3. 更贴近原声浏览器事件
对事件系统进行了一些较小的更改：
● onScroll 事件不再冒泡，以防止出现常见的混淆
● React 的 onFocus 和 onBlur 事件已在底层切换为原生的 focusin 和 focusout 事件。它们更接近 React 现有行为，有时还会提供额外的信息。
blur、focus 和 focusin、focusout 的区别：blur、focus 不支持冒泡，focusin、focusout 支持冒泡
● 捕获事件（例如，onClickCapture）现在使用的是实际浏览器中的捕获监听器。
这些更改会使 React 与浏览器行为更接近，并提高了互操作性。
尽管 React 17 底层已将 onFocus 事件从 focus 切换为 focusin，但请注意，这并未影响冒泡行为。在 React 中，onFocus 事件总是冒泡的，在 React 17 中会继续保持，因为通常它是一个更有用的默认值
4. 全新的jsx转换器
● 用 jsx() 函数替换 React.createElement()
● 运行时自动引入 jsx() 函数，无需手写引入react
在v16中，我们写一个React组件，总要引入
import React from ‘react’
这是因为在浏览器中无法直接使用 jsx，所以要借助工具如@babel/preset-react将 jsx 语法转换为 React.createElement 的 js 代码，所以需要显式引入 React，才能正常调用 createElement。
通过React.createElement() 创建元素是比较频繁的操作，本身也存在一些问题，无法做到性能优化，具体可见官方优化的 动机
v17之后，React 与 Babel 官方进行合作，直接通过将 react/jsx-runtime 对 jsx 语法进行了新的转换而不依赖 React.createElement，因此v17使用 jsx 语法可以不引入 React，应用程序依然能正常运行。
5. 副作用清理时机
● v17前，组件被卸载时，useEffect的清理函数都是同步运行的；对于大型应用程序来说，同步会减缓屏幕的过渡（如切换标签）
● v17后，useEffect 副作用清理函数是异步执行的，如果要卸载组件，则清理会在屏幕更新后运行

react 18

发布时间：2022 年
新增 API 和特性： 并发模式（Concurrent Mode）：通过 React.createRoot 启用新的并发功能。 自动批处理：对 setState 的调用现在在事件处理中自动批处理。 新的挂起（Suspense）功能：扩展了 Suspense 组件的能力，用于数据加载。 服务端渲染的改进：包括流式渲染和服务端 Suspense 支持。 新的钩子（Hooks）：例如 useId，用于生成稳定的唯一标识符。

1. 并发模式
   v18的新特性是使用现代浏览器的特性构建的，彻底放弃对 IE 的支持。
   v17 和 v18 的区别就是：从同步不可中断更新变成了异步可中断更新，v17可以通过一些试验性的API开启并发模式，而v18则全面开启并发模式。
   并发模式可帮助应用保持响应，并根据用户的设备性能和网速进行适当的调整，该模式通过使渲染可中断来修复阻塞渲染限制。在 Concurrent 模式中，React 可以同时更新多个状态。
   这里参考下文区分几个概念：
   ● 并发模式是实现并发更新的基本前提
   ● v18 中，以是否使用并发特性作为是否开启并发更新的依据。
   ● 并发特性指开启并发模式后才能使用的特性，比如：useDeferredValue/useTransition
2. 自动批处理
   批处理是指 React 将多个状态更新，聚合到一次 render 中执行，以提升性能
   在v17的批处理只会在事件处理函数中实现，而在Promise链、异步代码、原生事件处理函数中失效。而v18则所有的更新都会自动进行批处理。