React v17.0 RC 释出,官方称“没啥新特色”

2020年08月11日

React 前一个主要版本的发布是在两年半以前,今天我们(2020年8月10日)发布 v17 RC:没有什么新 Feature!(但笔者认为以下改进和优化还是很为 React 开发者着想的)

渐进式升级:同时使用两个 React 版本

从 React 15 升级到 v16 再到 v17,开发者往往要更新整个 APP 后再统一部署,这种体验对开发者很不友好,周期长甚至带来巨坑。从 React 17 开始,当你升级到 v18 甚至未来的更高版本时,你会有更多的选择:

  • 可以像以前一样将整个 codebase 的 React 一次性全部升级,或者;
  • APP 的一部分升级到 v18 其它部分仍然用 v17 跑,直到整个 APP 完成更新。

在大项目的维护和升级过程中,这一特性尤其重要!想想一下,如果在一个拥有成百上千个组件的项目中,只想升级其中的几个组件到 v18 使用最新的特性,怎么办?所以,为了适应这一场景 v17 作为一个主要版本,将会有一些 breaking changes。渐进式升级是如何运作的,可以运行这个 Demo 看一下 https://github.com/reactjs/react-gradual-upgrade-demo/

事件代理的改变

在 React 16 和之前版本,多数事件使用 document.addEventListener()。在 v17 中,将使用 rootNode.addEventListener()

在 React 17 中 event propagation 默认是停止的!需要添加第三个参数 { capture: true } 到 document.addEventListener 来修正这一问题。

document.addEventListener('click', function() {
  // Now this event handler uses the capture phase,
  // so it receives *all* click events below!
}, { capture: true });

其它 Breaking Changes

  • 向浏览器靠齐
    • 事件  onScroll  不再冒泡
    • React 的 onFocus 和 onBlur 在底层使用原生的 focusin 和 focusout
    • Capture phase 事件使用真正的浏览器 capture phase 监听
  • 不再有 Event Pooling
    React 17 中移除了“事件池”优化方案,因为在现代浏览器中性能未能提高多少。
    function handleChange(e) {
      setData(data => ({
        ...data,
        // This crashes in React 16 and earlier:
        text: e.target.value
      }));
    }

     

  • 添加 Effect Cleanup Timing
    在 React 17 中 useEffect 的清除函数选择更一致的时机执行,且是异步的。比如:如果组件正在卸载,清除的动作将在屏幕更新后执行。
    useEffect(() => {
      // This is the effect itself.
      return () => {
        // This is its cleanup.
      };
    });

     

  • 统一返回 undefined 的错误信息
    React 17 修正了 forwardRef 和 memo 组件忘记 return 时不报错的问题
    let Button = forwardRef(() => {
      // We forgot to write return, so this component returns undefined.
      // React 17 surfaces this as an error instead of ignoring it.
      <button />;
    });
    
    let Button = memo(() => {
      // We forgot to write return, so this component returns undefined.
      // React 17 surfaces this as an error instead of ignoring it.
      <button />;
    });

     

  • 原生的 Component Stacks
  • 移除私有的 Exports

编译者按:也许你还未来得及熟练使用 React 的 hooks,新版 v17 又来了。是学起来,还是那句老话“学不动了”丢一边?

更新说明:https://reactjs.org/blog/2020/08/10/react-v17-rc.html

展开阅读全文
3 收藏
分享
加载中
精彩评论
框架还是要看的,对产品开发进度,稳定性,产品周期还是有影响的。除非整个产品前端就你一个人开发
2020-08-11 19:43
3
举报
典型的对事又对人。 如果都抵制 eda 芯片设计软件是美国和英国的。 大部分工业软件都是国外的这和以前 闭关锁国有什么区别。好的东西学习不好吗? 非要带有色眼镜。你要是真这么争气就为国家工业软件做点什么。整天争这个框架不好那个框架不行。很low知道吗?会算法吗? 会设计模式吗?
2020-08-12 08:54
2
举报
facebook抵制中国
2020-08-11 16:06
2
举报
react很好 过一阵子不让你用了 看你傻眼不 美国这种案例还少么 真要拿公司开玩笑么
2020-08-12 09:45
1
举报
最新评论 (20)
facebook抵制中国
2020-08-11 16:06
2
回复
举报
放弃 React 用 Vue 吗?😂
2020-08-11 16:11
0
回复
举报
Facebook之前还在react的许可证里面埋过雷,还是等vue3比较香。
2020-08-11 16:14
0
回复
举报
外包看框架,喜欢比框架的一看就是外包人员,培训班出来的套娃
2020-08-11 18:59
0
回复
举报
框架还是要看的,对产品开发进度,稳定性,产品周期还是有影响的。除非整个产品前端就你一个人开发
2020-08-11 19:43
3
回复
举报
不重视框架选型还有理了,选错了后期哭去吧。
2020-08-11 20:44
0
回复
举报
我估计你就是培训出来的套娃 在这找存在感 架构选型至关重要
2020-08-12 09:43
0
回复
举报
典型的对事又对人。 如果都抵制 eda 芯片设计软件是美国和英国的。 大部分工业软件都是国外的这和以前 闭关锁国有什么区别。好的东西学习不好吗? 非要带有色眼镜。你要是真这么争气就为国家工业软件做点什么。整天争这个框架不好那个框架不行。很low知道吗?会算法吗? 会设计模式吗?
2020-08-12 08:54
2
回复
举报
说的好
2020-08-12 09:14
0
回复
举报
react很好 过一阵子不让你用了 看你傻眼不 美国这种案例还少么 真要拿公司开玩笑么
2020-08-12 09:45
1
回复
举报
这么说每个公司都应该出一套自己的框架,或者copy一份魔改
2020-08-12 09:47
0
回复
举报
你看看现在 阿里 腾讯 京东 哪个不是用自己研发的 等着被禁用然后傻眼?
2020-08-12 09:49
0
回复
举报
哪个是自研的?
2020-08-13 15:57
0
回复
举报
我说 facebook抵制中国 就是攀比框架了 你这理解能力差到极点了 这么爱国你去参军吧
2020-08-12 09:48
0
回复
举报
美国抵制中国
2020-08-12 09:02
0
回复
举报
按照嵩学的观点,我们是蛮夷。既然是蛮夷,难道还要耻于用敌人的东西吗。我用Angular,React,就好像八路拿到小鬼子的枪炮,喜笑颜开。
2020-08-12 09:31
0
回复
举报
MATLAB被禁用 React就有可能被禁用
2020-08-12 09:52
0
回复
举报
一个渲染框架而已
2020-08-12 10:13
0
回复
举报
明白人
2020-08-12 10:19
0
回复
举报
很棒
2020-08-11 16:00
0
回复
举报
更多评论
20 评论
3 收藏
分享
在线直播报名
返回顶部
顶部