react17于 2020年10月20号 正式发布,距今也有很长一段时间了,最近也是自己重新去研究了关于这个版本的相关更新与调整,因此就想借助此文来进行一次梳理与记录,废话不多说,开搞!

ppx2.jpg

正文

react17是个过渡版本,它本身是没有带来api的调整,更多的是对react本身内部的架构进行调整,借助这个版本,会使得之后的react版本升级变得更加容易,以及能让不同版本的react相互嵌套变得更加容易。虽然没有面向开发者的api的调整,但是对于其内部的升级改造,我们还是应该清楚的,这样才能在未来的开发中游刃有余地处理疑难杂症

inte.jpg

大体上来说,内部的更新主要有以下几点:

  1. 事件委托对象的变更: react不会再将事件处理添加到 document 上,而是将事件处理添加到渲染React树的 根DOM容器image.png
  2. 移除事件池: 由于之前的react版本为了提升浏览器的性能,引入了事件池的概念,从而实现 事件对象的复用,但是随着浏览器的性能越来越强悍,react认为已经没有必要再使用该方案进行优化,因此就移除了
  3. jsx的使用与react解耦: 在17之前,我们使用jsx时,必须得引入react,因为jsx被编译出来后,其实就是 React.createElement 的调用。17里面,将jsx的编译交给了react专门提供的方法:react/jsx-runtimereact/jsx-dev-runtime,它们是编译器自动引入的,无需我们手动引入,这样我们就可以避免在源代码中导入react了
  4. 副作用清除时机的调整: useEffect的清除时机更改到浏览器 绘制之后 执行,从而不会阻塞浏览器的绘制,提升应用流畅度
  5. 返回undefined始终报错: 17之前,在 forwardRefmemo 组件中返回undefined不会报错,这是因为react内部编码错误导致的,17中修复了这个问题,如果我们不想渲染任何内容,应该始终返回 null