09-React_17_版本:无新特性,却有新期待
React 17 版本不同寻常,因为它没有添加任何面向开发人员的新功能。相反,这个版本主要专注于让升级 React 本身变得更容易。 你甚至可以理解为他是一个"垫脚石"版本。
虽然没有新的功能,但是具有战略意义。 官方给出的这次升级定义是版本技术改造。因此本次升级替换了底层代码,向下兼容,同时甩掉历史包袱。 所以此次升级并没有代码断层,给未来留下了足够的升级空间。
接下来我们的课程也会全面采用React17 来进行讲解,对于react17 来说最大的特点是渐进式的升级。
渐进式升级
在过去的八年中,React 的升级一直很极端。你要么停留在旧的版本,要么将整个应用升级到新版本,不能选择中间态。 react 17 采用了逐步升级的策略允许多个react 版本共存,这对大型前端网站非常友好。
比如说:我们在应用开发过程中可以先升级路由系统,在升级弹窗系统,就这样一个模块一个模块平滑过渡到最新版本。
虽然说react 17 没有功能性的变化但还是有几个breaking changes(重大变化)。
breaking changes
事件委托的变更
在16 或者是更早的版本中,react 会执行 addEventListener 在 document 上添加事件处理器。 而在17的版本中react 将不会向document 添加事件处理器。而是添加在rootNode 中。(rootNode.addEventListener())
这样做的目的是在未来 react17 及 react17 以上的版本中React 管理的树,在嵌入另一个版本的 React 管理的树时更加安全了 。
与浏览器对齐
react17对事件系统进行了一些小改动: • onScroll 事件不再冒泡。 • React onFocus 和 onBlur 事件已转换的原生 focusin 和 focusout 事件。 • 捕获阶段事件(例如 onClickCapture )现在使用真实的浏览器捕获阶段监听器。这些变更使 React 更加接近浏览器行为,互操作性也有所提升。
删除事件池
什么是事件池,这点跟jQuery很像,事件池是为了在旧浏览器中提高性能而复用了不同事件之间的事件对象,所开发出来功能模块,但在现代的浏览器中这个功能模块对性能提升没有任何作用。 所以在react17中把事件池优化相关代码完全删除了,为了平滑过渡旧的接口都保留了下来,但不会产生任何的效果。
useEffect 清理操作改为异步操作
useEffect (副作用)本身是异步操作,但是在过去的版本中他的清理操作确是同步的。这种不统一会拖慢UI渲染效率。所以在17版本中全部改成了异步操作。
jsx 不可返回undefined
也就是说在17 版本后render 函数必须有明确的返回对象的。 这个修正的初衷是为了防止开发人员在使用的时候忘记写render。 不过如果大家之前写的代码比较标准这点变化几乎对你是没有影响。
删除部分私有API
这些私有的API 大部分是暴露给React Native 使用的, 这对前端网站开发几乎没有影响。
以上就是react17的改变,总结下没有新功能 但是运行多版本共用,主要是为了以后的平滑升级做准备。但是react17 绝对不是传闻中的过渡版本,从战略上来说它承接了以前的绝大部分特性,在移除过去糟粕的同时又通过逐步升级的方案给未来的扩展升级留下了足够的想象空间。
所以我们在最后也展望下未来在React18 版本中会带来什么样的变化。
- 更加强调函数式组件
- 支持微前端架构 允许支持不同的react版本
接下来我们会深入接触到函数式组件 React Hooks。