React 发布十周年!

简介: React 发布十周年!

2013 年 5 月 29 日,React 正式开源,至今已过去了十年!自发布以来,React 已经成为前端开发领域中最受欢迎的技术之一,其生态系统越来越丰富,Github 累计获得了 208k Star,每月 npm 平均安装量达到了 200w。本文就来总结十年来 React 的重要里程碑!

234.webp.jpg

2011:早期原型

2011 年,Facebook 工程师 **Jordan Walke 创建了 **FaxJS,它是 React 的早期原型,几个月后,Facebook 的团队使用完全由 React 和 Flux 提供支持的版本构建了点赞和评论功能。

3456.webp.jpg

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 中。大多数“早期采用者”都参加了这次会议。

6543.webp.jpg

2014:扩张之年

2014 年初,随着开发人员开始采用 React,React 的创建者计划了参观和会议来建立社区,来赢得开发者的认可,并帮助他们认识到 React 是为创新而设计的。同时,React Developer Tools 也成为了 Chrome Developer Tools 的官方扩展。同年,发布了 React Hot Loader,一个允许 React 组件在不丢失状态的情况下实时重新加载的插件。

77777.webp.jpg

2015:稳定之年

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

此外,React v0.13 于 2015 年 3 月发布,最引人注目的新特性是对 ES6 类的支持,这让开发人员在编写组件时具有更大的灵活性。**Dan Abramov **和 **Andrew Clark **发布了Redux,同时也推出了第一个稳定版的 React Developer Tools。

React v0.14 于 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。这展示了对稳定性的承诺以及在次要版本中引入新的向后兼容功能的能力以及 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 于 2017 年 9 月发布,其中包含多项更改和新功能,其中包括:

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

2019:React Hooks 发布

React v16.8 于 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 提供全面支持,包括检查嵌套对象。

7890.webp.jpg

2020:更新更简单

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

0987.webp.jpg

同年,React 引入了 零捆绑大小的 React 服务端组件,以获取 React 开发社区的初步反馈。

8890.webp.jpg

2022至今:持续改进

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

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

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

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

  • 使用函数组件和 Hooks 教授现代 React;
  • 提供了图表、插图、挑战和 600 多个新的交互式示例。

5677.webp.jpg

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

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

2023 年 5 月,React 推出一个新的官方支持的 Canary 发布渠道。它让诸如框架之类的精心策划的设置将个别 React 功能的采用与 React 发布计划分离开来。让开发者在设计接近最终版本时立即采用个别新功能,然后再以稳定版本发布——类似于 Meta 长期以来在内部使用新版本的 React 的方式。

未来

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


345.webp.jpg

相关文章
|
Kubernetes Ubuntu Linux
超详细的 Vagrant 上手指南,搭建Linux虚拟机别再用VMware Workstation了!
超详细的 Vagrant 上手指南,搭建Linux虚拟机别再用VMware Workstation了!
3402 0
超详细的 Vagrant 上手指南,搭建Linux虚拟机别再用VMware Workstation了!
|
4月前
|
人工智能 自然语言处理 搜索推荐
AI 零成本搭建个人网站,小白 3 步搞定!通义灵码智能体+MCP 新玩法
通过AI技术,即使不编写代码也能高效开发项目。从生成诗朗诵网页到3D游戏创建,这些令人惊叹的操作如今触手可及。经过摸索,我利用AI成功上线了个人站点:https://koi0101-max.github.io/web。无需一行代码,借助强大的工具即可实现创意,让开发变得简单快捷!
1373 70
|
消息中间件 监控 Kubernetes
云上如何实现 Autoscaling: AutoMQ 的实战经验与教训
文章介绍了 AutoMQ 的 Autoscaling 架构,包括利用云服务如 AWS 的 Auto Scaling Group 和 Cloud Watch,以及弹性策略的选取和优化。面临的挑战包括理解云服务的弹性策略、找到触发弹性的理想指标,以及应对不同场景的弹性需求。AutoMQ 最终采用定时和自定义目标跟踪策略来实现弹性,并展示了其在流量变化下的弹性效果。未来,AutoMQ 计划优化弹性策略、支持多云、自定义监控和 Kubernetes 集成。
177 0
云上如何实现 Autoscaling: AutoMQ 的实战经验与教训
|
9月前
|
SQL 关系型数据库 MySQL
MySQL导入.sql文件后数据库乱码问题
本文分析了导入.sql文件后数据库备注出现乱码的原因,包括字符集不匹配、备注内容编码问题及MySQL版本或配置问题,并提供了详细的解决步骤,如检查和统一字符集设置、修改客户端连接方式、检查MySQL配置等,确保导入过程顺利。
|
11月前
|
资源调度 前端开发 JavaScript
前端研发链路之脚手架
本文首发于微信公众号“前端徐徐”。文章介绍了前端开发中脚手架工具的重要性及其工作原理。脚手架工具能够大幅提升开发效率,确保代码质量和项目一致性。文章详细探讨了脚手架的历史、工作原理、常见工具及其优势与潜在问题,并展望了其未来发展方向,帮助开发者更好地理解和应用脚手架工具。
275 4
前端研发链路之脚手架
|
C语言
C语言条件判断:if、else、else if 和 switch 详解
C语言条件判断:if、else、else if 和 switch 详解
1256 0
|
弹性计算 固态存储 大数据
阿里云服务99元一年,多配置价格表,太炸裂了
阿里云服务器2024年最新租用价格:轻量应用服务器2核2G3M带宽年费82元,折合每月6.8元;2核4G4M带宽年费298元。新老用户共享99元一年的2核2G3M带宽ECS服务器优惠,及199元一年的2核4G5M带宽企业级ECS u1实例。游戏服务器方面,4核16G10M带宽70元/月,8核32G10M带宽160元/月。此外,还有GPU服务器等多种配置供选择。具体价格和配置请参考阿里云官方页面。
1649 107
|
SQL 数据可视化 Oracle
这篇文章教会你:从 SQL Server 移植到 DM(上)
这篇文章教会你:从 SQL Server 移植到 DM(上)
479 8
|
人工智能
[MGeo应用]使用python+AI模型拆分Excel中地址的省市区街道
[MGeo应用]使用python+AI模型拆分Excel中地址的省市区街道
|
Kubernetes API Docker
k8s 理论知识基本介绍
k8s 理论知识基本介绍