React 发布十周年!

2023-05-30 0 661

2013 年 5 月 29 日,React 正式宣布开放源码,迄今已往后了二十年!自正式宣布发布年来,React 已经正式宣布成为前端开发应用领域中最畅销的控制技术众所周知,其生态系愈来愈多样,Github 总计赢得了 208k Star,每星期 npm 平均值加装量达至了 200w。责任编辑就来归纳二十年来 React 的关键里程碑式!

React 发布十周年!

2011:晚期蓝本

2011 年,Facebook 技师 Jordan Walke 建立了 FaxJS[1],它是 React 的晚期蓝本,两个月后,Facebook 的工程项目组采用全然由 React 和 Flux 提供更多全力支持的版构筑了雅雷和文章机能。

React 发布十周年!

Facebook 于 2012 年全面收购了 Instagram。Instagram 下定决心选用 Facebook 的新控制技术(React)来构筑其中文网站。这就存有两个难题:React 与 Facebook 的微电子栈密切应用软件系统。Pete Hunt 彼时提议将 React 与 Facebook 解耦,并顺利完成了将其解耦所需的绝大部分组织工作,进而使 React 正式宣布成为开放源码应用软件。

2013:正式宣布发布前两年

在 2013 年 5 月 29 日至 31 日举办的 JS ConfUS 前夕,Jordan Walke 向在世界上如是说了 React,正式宣布宣布 React 正式宣布成为两个开放源码工程项目。他表示:“在构筑他们的模块架构时,他们务求最优化曝露给开发人员的面向全国开发人员的变动的数目”。彼时的观众们持都对 React 持揣测立场,认为 React 代表者了标识符可移植性各方面的关键性退步,即使将 HTML 内嵌到了 JavaScript 中。绝大多数“晚期选用者”都参与了此次全会。

React 发布十周年!

2014:收缩前两年

2014 年末,随著开发人员开始选用 React,React 的建立者计划了参观和全会来建立社区,来赢得开发人员的认可,并帮助他们认识到 React 是为创新而设计的。同时,React Developer Tools[2] 也正式宣布成为了 Chrome Developer Tools 的官方扩展。同年,正式宣布发布了React Hot Loader[3],两个允许 React 模块在不丢失状态的情况下实时重新加载的插件。

React 发布十周年!

2015:稳定前两年

在 2015 年 1 月的 React.js 大会上的控制技术演讲中,Facebook 正式宣布发布了 React Native 的第两个版,可以轻松进行 Android 和 iOS 开发。

此外,React v0.13[4] 于 2015 年 3 月正式宣布发布,最引人注目的新特性是对 ES6 类的全力支持,这让开发人员在编写模块时具有更大的灵活性。Dan Abramov 和 Andrew Clark 正式宣布发布了Redux[5],同时也推出了第两个稳定版的 React Developer Tools。

React v0.14[6] 于 2015 年 10 月正式宣布发布,此版带来了一些关键性变动。主要的 react 包被拆分为 react 和 react-dom,这使得编写在 Web 版的 React 和 React Native 之间共享的模块正式宣布成为可能。此外,refs 作为 DOM 节点本身曝露给 DOM 模块。

那时,React 开始赢得广泛认可,并被一些大型企业采用,如 Netflix 和 Airbnb。

2016:正式宣布成为主流

2016 年 4 月,React 从版 0.14.7 切换到主要稳定版:React v15.0[7]。这展示了对稳定性的承诺以及在次要版中引入新的向后兼容机能的能力以及 React 向前发展的持续进步. 该版中的一些关键性变动改进了他们与 DOM 交互的方式:

挂载模块时采用 document.createElement 而不是设置 innerHTML,这在现代浏览器中速度更快,并且它也修复了一些边缘情况。函数模块可以返回 null。改进了对 SVG 的全力支持,添加了对当今浏览器可识别的所有 SVG 属性的全力支持。

为了使生产环境下的调试更加容易,在推出的 15.2.0 中引入了错误标识符系统,React 工程项目组开发了两个脚本来收集所有的不变错误消息并将它们放在两个 JSON 文件中,并且在构筑时 Babel 采用 JSON 重写在生产中的不变调用以引用相应的错误 ID。当生产出现难题时,React 抛出的错误将包含两个带有错误 ID 和相关信息的 URL。该 URL 会将指向文档中的两个页面,在该页面上重新组合了原始错误消息。

同年,React 通过新的全会(例如 React Europe)赢得了更多的认可。MobX 和 BlueprintJS 等新库的正式宣布发布受到了开发社区的高度赞赏。

2017:React Fiber 正式宣布发布

React v16.0[8] 于 2017 年 9 月正式宣布发布,其中包含多项更改和新机能,其中包括:

通过引入 Error Boundaries 改进了错误处理,Error Boundaries 是特殊的 React 模块,提供更多了一种干净的方式来处理其子模块中的错误,记录这些错误并在其位置显示回退 UI。允许从模块的渲染方法返回多个元素,例如数组和字符串。改进了服务端渲染,比 React 15 快大约三倍。推出全新的 React Fiber 架构,一套新的内部渲染算法。React Fiber 正式宣布成为 React 工具库未来任何改进和机能开发的基础。

2019:React Hooks 正式宣布发布

React v16.8[9] 于 2019 年 2 月正式宣布发布,正式宣布推出 React Hooks,Hooks 让他们无需编写类就可以采用状态和其他 React 特性。还可以构筑自己的 Hooks以在模块之间共享可重用的有状态逻辑。

import React, { useState } from react

;

function Example() 

{

  const[count, setCount] = useState(0

);

  return

 (

    <div>      <p>You clicked {count} times</p>      <button onClick={() =>

setCount(count + 1)}>

        Click me

      </button>    </div>

  );

}

同年,React 工程项目组推出了全新的React DevTools,其可以在 Chrome、Firefox 和 (Chromium) Edge 中使用!此版发生了很多变动!提供更多了显着的性能提升和改进的导航体验。它还为 React Hooks 提供更多全面全力支持,包括检查嵌套对象。

React 发布十周年!

2020:更新更简单

React v17.0[10] 于 2020 年 10 月正式宣布发布,距离上两个主要版已经往后了两年半的时间。此版主要侧重于使从以前的版更新 React 本身变得更简单,不包含任何面向全国开发人员的新机能。在此版之前,从 React 的晚期版升级到新版本需要一次升级整个应用。React 17 提供更多了一次升级整个应用或按认为合适的方式逐个升级应用的选项。

React 发布十周年!

同年,React 引入了 零捆绑大小的 React 服务端模块的初步反馈。

React 发布十周年!

2022迄今:持续改进

React v18.0[12] 于 2022 年 3 月正式宣布发布,这个主要版包括开箱即用的改进,例如自动批处理、新 API(例如 startTransition)以及支持 Suspense 的流式服务端渲染。React 18 中的许多机能都建立在新的并发渲染器之上,这是两个解锁强大新机能的幕后变动。

2022 年 6 月,React Labs 公布正在研究的方向:

React Server Components (RSC)优化资源加载静态服务端渲染优化React 优化编译器离屏渲染过渡跟踪新的 React 文档

2023 年 3 月,React 推出全新的官方文档:react.dev[13]。

采用函数模块和 Hooks 教授现代 React;提供更多了图表、插图、挑战和 600 多个新的交互式示例。React 发布十周年!

2023 年 3 月,React Labs 公布正在研究的方向:

React Server Components(RSC)资源加载优化文档元数据优化React 优化编译器离屏渲染过渡跟踪

2023 年 5 月,React 推出两个新的官方全力支持的 Canary 正式宣布发布渠道[14]。它让诸如架构之类的精心策划的设置将个别 React 机能的选用与 React 正式宣布发布计划分离开来。让开发人员在设计接近最终版时立即选用个别新机能,然后再以稳定版正式宣布发布——类似于 Meta 长期年来在内部采用新版的 React 的方式。

未来

距离 React 上一次版更新(最新版为 v18.2)已经往后了近一年。React v19.0 还在开发中(当前进度 45%),期待更多实用的机能出现在 React 中!

React 发布十周年!

相关链接

[1]

FaxJS: https://github.com/jordwalke/FaxJs

[2]

React Developer Tools: https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html

[3]

React Hot Loader: https://github.com/gaearon/react-hot-loader

[4]

React v0.13: https://reactjs.org/blog/2015/03/10/react-v0.13.html

[5]

Redux: https://redux.js.org/

[6]

React v0.14: https://reactjs.org/blog/2015/10/07/react-v0.14.html

[7]

React v15.0: https://reactjs.org/blog/2016/04/07/react-v15.html

[8]

React v16.0: https://reactjs.org/blog/2017/09/26/react-v16.0.html

[9]

React v16.8: https://legacy.reactjs.org/blog/2019/02/06/react-v16.8.0.html

[10]

React v17.0: https://reactjs.org/blog/2020/10/20/react-v17.html

[11]

零捆绑大小的 React 服务端模块: https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html

[12]

React v18.0: https://legacy.reactjs.org/blog/2022/03/29/react-v18.html

[13]

react.dev: https://react.dev/

[14]

Canary 正式宣布发布渠道: https://zh-hans.react.dev/community/versioning-policy#canary-channel

往期推荐

React API 和标识符重用的演变!

好看又好用的开放源码博客系统!

Nuxt 3.5 正式宣布正式宣布发布,全力支持 Vue 3.3!

WebGPU:在浏览器中解锁现代 GPU 访问

Google I/O 2023:最新 CSS 特性解读!

Vue 3.3 正式宣布正式宣布发布,代号:Rurouni Kenshin

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务