从 React Conf 2021 中学习

2025-05-24

从 React Conf 2021 中学习

最近，我有机会参加数字React Conf 2021 ，并聆听了一些非常出色的演讲者的演讲。

这篇文章旨在总结（从很多方面来说）我从这次会议上学到的重要收获。例如，有一些关于设计/UI 的精彩演讲，我觉得很有趣，但由于我更侧重于编码方面，所以我将主要关注这些领域。

因此，无需进一步的介绍，以下是我发现的一些最引人注目的新主题的无序列表：

  1. 会议视频链接
  2. React 18 候选版本
  3. 更新至 React 18
  4. Suspense 和服务器组件
  5. React 文档
  6. 不寻常的 React 环境
  7. 使用 React Native 进行跨平台
  8. 开发人员工具
  9. 记忆化的未来
  10. Shopify 的氢气
  11. 其余一切
  12. 额外提示
  13. 总结

会议视频链接

整个 5 小时的会议目前可以在 Youtube 上供任何人免费观看。

（请注意，他们已经声明将发布每个演讲的单独视频，因此该视频链接可能在不久的将来会失效。如果发生这种情况，我将更新各个演讲的链接）

React 18 候选版本

React 18的官方候选版本发布恰逢大会开幕。除非未来几个月发现任何重大问题，否则该版本被认为是“预计于 2022 年初正式发布的版本”。

因此，尽管您可能暂时不想升级关键生产应用程序，但截至目前，React v18 已接近完成。我们强烈建议您在任何新项目中从一开始就使用它。

当然，会议讨论的重点是围绕 React 18 本身的新特性。

更新至 React 18

在现有的 React 项目中运行以下命令：

npm install react@beta react-dom@beta
Enter fullscreen mode Exit fullscreen mode

请注意，从今天起，您也可以安装 RC 版本，而不是 Beta 版本，因为 18 现在是候选版本。请查看NPM上的版本信息，了解有哪些版本可用。

然后您需要做的就是更改应用程序挂载点（大概在您的索引文件中）：

const container = document.getElementById('root');
ReactDOM.render(<App />, container);
Enter fullscreen mode Exit fullscreen mode

到：

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
Enter fullscreen mode Exit fullscreen mode

您已准备好开始使用 React 18！

Suspense 和服务器组件

Suspense 已经在 React 17 中可用，你可能之前使用过如下代码：

const MyComponent = React.lazy(() => import('./MyComponent'));

const App = () => {
  return (
    <Suspense fallback={<Loading />}>
      <MyComponent />
    </Suspense>
  );
}
Enter fullscreen mode Exit fullscreen mode

然而，使用 Suspense 进行代码分割的这种使用是在客户端进行的，现在的开发是在服务器端实现 Suspense 。

目前，SSR（服务器端渲染）是一种“全有或全无”的方法。如果我们有一个使用 SSR 生成的页面，其中包含标题、导航、内容和评论，那么该页面的渲染时间将等于其各个组件中最慢的组件。如果其他每个组件的渲染时间为 0.1 秒，而评论渲染时间为 1 秒，那么您仍然需要等待评论渲染完成后才能将应用发送到客户端。

React 服务器组件不再适用这种情况。现在，尽管组件是在服务器端渲染的，你仍然可以用一个后备加载旋转器（或任何你想要的）包裹它<Comments />，<Suspense />应用将一直使用后备加载效果，直到组件准备就绪。

一旦准备就绪，包含渲染评论的包将被发送到客户端以替换后备组件。

更棒的是，React 非常智能，能够监测用户交互。如果一个暂停的组件在加载过程中被点击，React 会立即停止其他正在执行的操作，并优先加载该组件！

对于服务器组件来说，关键点在于它们始终在服务器上渲染，而不会被发送到客户端进行渲染。由此可以得出两个关键结论：

  • 服务器组件不会影响你的包大小，因为它们总是在服务器上渲染

  • 服务器组件可以直接访问您的数据库

如果您想了解有关服务器组件的更多信息，这里有一个来自 Dan 的精彩演讲，涵盖了所有细节：

如果你想看看 Suspense 的实际应用，React 团队的Dan Abramov创建了一个 codesandbox 示例。

点击刷新按钮查看效果。您需要在另一个标签页中打开完整链接，查看代码示例及其组成。

React 文档

React 文档最终通过 hooks-first 内容进行了现代化更新。

它们已经发布测试版，并计划在 React 18 发布时正式发布以取代当前的文档。

关于新 React 文档的讨论大约在 2:15 开始

不寻常的 React 环境

我真的很喜欢Sarah Rainsberger 的演讲，重点关注 React 的“不寻常”开发环境。

我的妻子今年第一次使用 React，并且对这次演讲很有共鸣，尤其是这个想法：人们可以学习 React 及其概念，而不必经过学习命令行工具、NPM 等的先决阶段。

例如，借助codesandbox、glitch和repl.it等在线编码环境，您可以在几秒钟内开始在 React 中编写真正的程序，而无需安装任何依赖项，这非常强大。

我见过的会议中，我最喜欢的趋势之一是鼓励邀请技术新手来演讲，分享他们的经验，并面向类似职位的新开发者。这能有效帮助人们打破入门门槛，避免他们被大量需要学习的新工具和新概念所困扰。

演讲开始于 2:34 左右

使用 React Native 进行跨平台

React 团队似乎确实在推动各种平台之间开发人员体验的平等。

关于 React Native 目前用途的讨论很多，以及针对一个平台（例如 Android）的优化最终如何以意想不到的方式应用到其他平台（iOS）。

他们讨论了如何使用 React Native 不仅在移动平台上开发原生体验，而且还在 Windows（Microsoft Office 套件的一部分）和 Xbox（新款 Xbox Series X 的仪表板）等操作系统上开发原生体验。

下面的图片确实展示了他们想要实现的目标：

反应原生

如果您想亲自观看，这次演讲从 3:34 左右开始。

开发人员工具

Brian Vaughn的演讲重点关注了 React 开发人员工具的新更新和即将推出的更新。

他总结了未来几个月该工具的重点：

  • 整合分析器和时间线以协同工作
  • React Native 支持
  • CPU 和内存分析

本次演讲开始于 1:41

记忆化的未来

最有趣的演讲之一（有时我完全无法理解）来自Xuan Huang，主题是React 中记忆化的未来。

在 React 中，memoization 主要用于根据某种状态指示 React 哪些组件可能需要或不需要重新渲染。通常，对于一个组件，你可以明确声明，如果 props 没有改变，则无需重新渲染该组件。

有关React.memo的更多信息。

使用useMemo hook，我们可以创建一个记忆值，当依赖项数组中的值保持不变时，该值不会被重新计算。设置这种情况有时非常繁琐，需要使用大量额外的代码，甚至可能需要使用useEffecthook 才能实现目标。此外，它还有一个不好的副作用，就是使代码流变得不那么线性（不太可能从上到下保持逻辑一致）。

Xuan 的演讲通过实时演示示例来演示这个概念，然后他来了一个 180 度大转弯，开始编写一个“理论示例”，来说明它“可能”是什么样子。说实话，新示例看起来比原来复杂得多……

但他解释说，如果一切顺利的话（这个想法仍在开发中），他正在编写的所有代码都可以自动处理。一个工具可以检测哪些地方需要记忆化，并自动应用记忆化来优化组件。真是太疯狂了。

请自行检查：演讲从 1:54 开始。

Shopify 的氢气

Shopify 是 React 服务器组件工作组的一部分，并且在其名为Hydrogen的新 React 框架中大力推崇服务器组件的强大功能。

Hydrogen 是一个全新的基于 React 的框架，旨在统一服务器组件、智能缓存和 Shopify 的 API 的组合。

Shiopify 维护着他们自己的关于 Hydrogen 对React 服务器组件的支持的文档，他们声称在服务器组件上维护着他们自己的稳定抽象层，因此无论它们目前的状态如何，您都可以放心使用它们。

其余一切

还有更多讲座！有些讲座我错过了，只是因为时间紧迫、午餐、孩子等等；其他的则超出了我通常的工作范围（尽管我一直对学习很感兴趣，即使它不直接适用于我）。

无论如何，我都鼓励你去看看其他一些演讲：

额外提示

以下是我学到的几个简单实用的东西，今天很容易学会和使用。

与大多数演讲一样，这些都是 React 18 的新功能。幸运的是，React 18 的升级路径旨在非常简单并且完全向后兼容。

请参阅本文开头的更新部分，了解如何在几行代码中进行更新的简单示例。

批处理

即使连续多次调用，先前的状态更新也始终会被批处理到单个渲染中。然而，这样做有一个限制：如果调用这些状态更新的函数是异步的，则更新不会被批处理。

从 React 18 开始，这种情况不再成立。v17 中的以下代码示例将触发两个单独的状态更新，而在 v18 中，它们将被一起批处理：

fetchFromApi().then(()=> {
    setLoading(false);
    setError(false);
})
Enter fullscreen mode Exit fullscreen mode

延迟状态

我学到的我最喜欢的新钩子之一，我认为它很棒，就是useDeferredValue钩子。

他们在施鲁蒂·卡普尔（Shruti Kapoor）的演讲中第一次展示它时，我就觉得它太棒了。毫不奇怪，它在其他演讲中至少又出现了两三次，因为它在很多场景中都非常有用。

它的作用基本上是让你指定一个你知道会比组件其他状态花费更多时间的状态，并允许组件自行渲染，而无需等待“大状态”。当“大状态”准备好后，它就会渲染“大状态”。

举个例子，大型列表通常符合这个标准。如果你有一个过滤按钮，可以改变正在渲染的大型项目列表的状态。

以下示例来自有关该功能的React 文档：

function App() {
  const [text, setText] = useState("hello");
  const deferredText = useDeferredValue(text, { timeoutMs: 2000 }); 

  return (
    <div className="App">
      {/* Keep passing the current text to the input */}
      <input value={text} onChange={handleChange} />
      ...
      {/* But the list is allowed to "lag behind" when necessary */}
      <MySlowList text={deferredText} />
    </div>
  );
 }
Enter fullscreen mode Exit fullscreen mode

总结

我希望你能从这篇文章中学到一些东西，也希望你有机会了解其中的一些谈话。

请查看我的其他学习教程。如果您觉得其中有任何内容有用，请随时发表评论或提出问题并与他人分享：

想要了解更多类似教程，请在 Twitter 上关注我@eagleson_alex

文章来源：https://dev.to/alexeagleson/learnings-from-react-conf-2021-17lg
Devto 翻译
PREV
将 React 应用程序转变为可安装的 PWA，具有离线检测、服务工作者和主题功能。
NEXT
如何使用 Node.js 备份您的个人文件（并在此过程中学习一些 webdev 技能）