React 的一年 - 2019 年回顾

与Caroline Odden和Jonas Løchsen合作撰写。本文最初发表于blogg.bekk.no（挪威语），我们也在该网站上发布名为 的每周 React 摘要<ForrigeUke />。

对 Greta 来说，这是伟大的一年，对 Trump 来说却是糟糕的一年。但今年真正的赢家是 React，以及它那由开发者、支持者和老用户组成的优秀社区。

2019年发生了很多事。我们每周一晚上都会为大家简要总结一下我们热爱和珍视的这个社区里发生的大大小小的新闻。其中一些新闻比其他的要重要一些。

在这篇文章中，我们将回顾这一年，重点介绍 2019 年的一些最重要的新功能和新闻报道。最后，我们还找到了一些我们最喜欢的 React 会议的录音！

钩子

经过几个月的热切等待，React 16.8 终于将我们期待已久的功能 - Hooks - 带到了稳定版本。

在 2018 年 ReactConf 大会上，React Core 团队宣布他们正在开发一个新功能，旨在显著提升我们的 React 使用体验。这个提案名为 hooks，它为我们提供了处理函数组件状态和副作用的强大工具。

如果您没有听过最初的谈话，您可以（并且应该！）在这里看到：

哦，这里还有介绍性的博客文章！

如果您想尝试一下，我们还写了一篇关于钩子的想法的帖子（挪威语）。🤘

React Native 也得到了钩子！

Hooks 在 Web 上线一周后，React Native 也紧随其后。0.59 版本全面支持 Hooks，这让整个 React Native Twitter 都为之疯狂 🙌

React Router 5

这真是一个很棒的版本——完全没有重大变更！好吧——几乎没什么重大变更。他们不得不升级主版本号的唯一原因是他们处理依赖项的方式react-router-dom。

它可能违反了语义版本控制规则，但无论如何🤭如果您想了解更多信息，这里是发布博客文章！

但它并非全是错误——这个版本带来了 React 16 兼容性、不再有<StrictMode />警告、对路径数组的支持等等。

创建 React App v3

的第三个主要版本create-react-app带来了一系列很酷的新功能，包括“钩子规则”eslint 支持、TypeScript linting 和绝对导入。

您可以在此处阅读完整的变更日志。

热重载 2.0：快速刷新

热重载是 React 开发者体验中最好的，也是最差的功能。看到组件在保存时自动更新，同时保持组件状态，真是太棒了。它让我们的迭代速度比我所知的任何其他平台都快！但与此同时，它有一半的时间都无法正常工作，一开始就很难让它正常工作，简直是一场噩梦。

开发者体验好坏参半的主要原因在于该功能是在用户层实现的。为了解决这个问题，React 团队已经着手改进，并实现了一个更加稳定的实现，可以在 React 和 React Native 中同时运行。

它已经支持 React Native 了，并且几周后就会支持 Web 端。如果您正在使用 Parcel，则可以在较新的 alpha 版本中开始使用它，Webpack 也有一个开放的 Pull 请求来添加支持。

这意味着我们很可能也会把它放进去create-react-app！我们非常兴奋。

React Router 和 Reach Router 强强联手

大多数 React 应用都会使用路由，最近出现了两个主要选择。长期以来，React Router 一直是首选，但自从 Gatsby 开始使用竞争对手 Reach Router 以来，我们在路由方面突然有了选择。至少在明年之前是这样。

5 月 17 日挪威国庆日，Reach Router 之王（也是 React Router 创始人）Ryan Florence 宣布这两个库将合并为一个！

您可以在这里阅读所有详细信息，但简而言之，我们将看到更多的钩子、更少的库（Reach Router 即将弃用）以及一个通用的 API。我们已经注意到了中引入的新钩子react-router@5.1.0的一些改进，我们迫不及待地想看到未来会发生什么。

说到合并——或许我们以后会看到更多这样的合并？在 CSS-in-JS 的世界里，Styled Components 和 Emotion 的 API 看起来越来越像了！🤔

新的 DevTools

在经过了一整年的调侃之后，Brian Vaughn 终于在今年 8 月发布了完全重写的 React DevTools 版本，他对此感到非常自豪。这次重写带来了 hooks 支持、大型应用程序的性能提升以及更佳的用户体验。

然而，据我们从 Brian Vaughn 的Twitter 账户上了解到，新功能的实现还远未完成。4.3版本即将发布！

反应门

当 React 的大多数大佬们都在 React Rally 上聚会的时候，Twitter 上发生了一起相当严重的事件。后来被称为“React Gate”的事件，是一场关于我们社区中一些较为恶劣和种族主义的部分的大规模、分布式争论。种族主义和社会排斥的讨论非常激烈，而且两极分化严重，很多人因此在很长一段时间内都没有再使用 Twitter。唉。

有很多精彩的回顾总结了整个事件，我们在两篇博客 文章中对此进行了介绍。

不过，事后并非全是坏事。相反，它带来了一些非常切实可行的积极成果！React 团队更加注重将边缘群体纳入科技领域，并实施了贡献者契约行为准则。许多参与 React Gate 事件的人后来在社区中扮演了更重要的角色，努力包容善良的人们，并压制那些恶意评论者、种族主义者和厌女症患者。这就是我所说的圆满结局。

并发模式

今年秋季的重头戏是内华达州亨德森市的 ReactConf，真是太棒了。最大的新闻莫过于并发模式的引入——它现在已经在 React 的实验性发布渠道中可用了。

但请注意，它目前仍处于实验阶段，尚未在任何稳定版本中提供。如果您想深入了解这些 API，以便在它们发布时抢占先机，那么您应该立即开始研究。

引用大量文档，并发模式是

一组新功能可帮助 React 应用保持响应并优雅地适应用户的设备功能和网络速度。

这听起来太棒了！React 团队在产品迭代过程中为我们提供了卓越的开发者体验，但这个功能却略有不同。它关乎最终用户体验——并且尽可能地使其流畅。我们非常期待这个方向！

Concurrent 模式开启了一个充满可能性的新世界。顾名思义，它允许我们同时渲染多个元素，甚至在出现更高优先级的任务时暂停渲染某些元素。所有这些功能协同工作，让你的应用尽可能流畅运行。

Harry Wolff撰写了一篇精彩的总结，解释了为什么并发模式是最好的，并用大量很好的例子进行了解释。

他甚至谈到了是否需要处理并发模式。答案是——就像大多数新的和更高级的 React 功能一样——不需要，但如果你需要，这对你的用户来说是一个巨大的好处。它是一个强大的工具，让你有机会控制你的应用如何处理异步任务和渲染 UI——当然，如果你有时间和资源的话。

Suspense 用于数据获取

从 React 16.6 开始，React 的 Suspense 新功能让你有机会在等待应用程序部分加载时延迟渲染组件，并渲染加载器。通过前面提到的并发模式，我们也可以使用此功能来获取数据、图片以及任何你想要的东西！

您可以在文档中阅读有关所有内容（注意 - 这仍处于实验阶段！）

正如任何新鲜事物一样，理解它们如何组合在一起可能有点困难。幸运的是，Maggie Appleton 制作了一本精彩的图文指南，介绍了 Suspense 的原理和使用方法：

想要了解这项新功能究竟解决了什么问题，我们建议您仔细看看 Dan Abramov 的这条 Twitter 帖子。他指出了目前解决方案存在的问题，并指出了 Suspense 是如何扭转乾坤的。

创建 React App 获取模板

12 月，官方 React bootstrapping CLI 3.3.0 版本create-react-app发布，它包含一些非常酷的功能。

首先，它现在支持自定义模板的概念。也就是说，当你启动一个新项目时，会自动包含文件和依赖项！

对于像 CodeSandbox 这样的产品来说，这是一个非常棒的功能，因为它让它们有机会为用户创建更加灵活的模板。CodeSandbox 甚至推出了所谓的“模板宇宙”（Template Universe），承诺能够缩短项目启动时间。

这个新版 Create React App 的另一个重要功能是支持 JavaScript 中的两个新语言功能——可选链和空值合并运算符。

此外，react-testing-library默认情况下已包含。无论如何，这个出色的库对于任何项目来说都是必备的，所以我很高兴他们决定将其包含在所有项目中。

有关新功能的完整列表，请参阅此处的更改日志。

Redux 样式指南

如果你正在读这篇文章，那么你很可能曾经接触过 Redux。如果你还没有接触过，Redux 曾经是任何新 React 应用的必备状态处理库。

Redux 在过去一年中失去了许多光彩，主要是因为 React 本身的改进。许多人使用 Redux 作为全局存储，但随着新的 Context API 和 hooks 的引入，自己解决这个问题变得几乎轻而易举。此外，Redux 在一些看似不必要的地方引入了大量的样板代码。

话虽如此，Redux 仍然是复杂应用程序的绝佳工具，而且 - 更重要的是 - 它可能是您所维护的遗留应用程序技术栈的一部分。

由于 Redux 在可预见的未来可能不会消失——无论是从 React 生态系统中，还是从你的应用中——因此，以最佳方式使用它至关重要。正因如此，Mark Erikson 和他的维护团队撰写了一份非常详细且实用的建议列表，指导你如何“以 Redux 的方式”使用 Redux。这份建议列表包含一组规则，他们将其分为三个部分：必备、强烈推荐和可选。

遵循这些，您将获得更小、更简单、错误更少的代码，以及更简单的方式来接纳新开发人员。

我们最喜欢的一些会议

除了过去几个月偶然发现的各种新功能、库和新闻报道之外，我们还注意到有大量与 React 相关的会议！我们总结了React Conf和JSConf（均为挪威语），但这里简要概述了所有与 React 相关的大型会议，以及您可以在哪里找到所有演讲。这里没有特定的顺序🤷‍♂️

说到会议 - 您可以在React 的网站上找到与 React 相关的会议和聚会的完整列表！

ReactJS 女孩大会

当 React 大会宣布全女性演讲者时，很多人都很生气。真是太蠢了，竟然有人为此生气。大会精彩纷呈，演讲精彩纷呈，演讲嘉宾也激动人心，据说对参会者来说，这将是一次非常棒的体验。

您可以在此处看到所有演讲。

ReactConf

React 官方大会上有很多精彩的演讲，从 Suspense 到 Facebook 内部的 CSS-in-JS 库，应有尽有。我特别推荐 Sophie Alpert 的演讲，她在台上现场编码的同时，还实现了一个 React 的可运行版本 🤯

您可以在此处看到所有演讲。

反应欧洲

顾名思义，这是欧洲最大的 React 会议之一。在众多精彩演讲中，Jared Palmer（Formik、TSDX 的幕后推手以及 Undefined Podcast 的创始人之一）就 React 的现状做了精彩的演讲。

您可以在此处看到所有演讲。

React 阿姆斯特丹

React Amsterdam 的视觉形象是我们见过最酷炫的之一，内容也同样如此。众多 React 的知名人士出席了此次活动，包括 Kent C. Dodds、Max Stoiber 和 meme 之王 Mark Dalgleish。

您可以在此处看到所有演讲。

React 高级版

当美国的 React 爱好者们在内华达州的 ReactConf 上狂欢时，欧洲的 React 大会则以 React Advanced 为中心。大会r/reactjs负责人 Shawn Wang（又名 swyx）在台上现场编写了一个 hook 实现，而一向风趣幽默的 Ken Wheeler（holla）则以一段精彩的魔术拉开了主题演讲的序幕！

您可以在此处看到所有演讲。

React Rally

被誉为最值得参加的 React 大会，这无疑对门票销售大有裨益。React Rally 的门票一如既往地售罄，听起来今年和去年一样精彩。今年的大会上有一些非常精彩的演讲，但我最喜欢的当属 11 岁的 Revel West 的演讲“所以你认为自己是初级开发者？”👶

您可以在此处看到所有演讲。

2019：回顾

2019 年对于 React 及其社区来说是意义非凡的一年。在持续关注提升开发者体验的同时，我们也在为提升最终用户体验付出了巨大的努力。无论怎么说，这都是好消息。

Hooks 的引入正是我们期望看到的改变，它已经简化了全球许多代码库。此外，Hooks 也让 React 教学变得更加轻松——不再需要解释this和拼写错误的生命周期方法。

Suspense 和 Concurrent 模式可能是我们明年会注意到的接下来的几个重大变化，届时它们最终将正式发布。我们已经看到了API 的样子，而将其可能性引入更广阔的 React 生态系统的工作正在如火如荼地进行中。

React Native 在 2019 年也备受青睐，这对于抵御 Flutter 和 SwiftUI 等新框架的竞争至关重要。我们非常高兴看到新功能的到来，例如快速刷新、更快的 JavaScript 引擎 (Hermes) 以及大幅改进的文档。

2019 年对于 React 来说是辉煌的一年。我们希望并相信，2020 年能够延续这一势头。

感谢阅读！