React 会议 2021 回顾
2021年12月17日 由 Jesslyn Tannady 和 Rick Hanlon
🌐 December 17, 2021 by Jesslyn Tannady and Rick Hanlon
上周我们举办了第六届 React 大会。在往年,我们曾利用 React 大会的舞台发布改变行业的公告,如 React Native 和 React Hooks。今年,我们分享了 React 的多平台愿景,从发布 React 18 开始,并逐步采用并发特性。
🌐 Last week we hosted our 6th React Conf. In previous years, we’ve used the React Conf stage to deliver industry changing announcements such as React Native and React Hooks. This year, we shared our multi-platform vision for React, starting with the release of React 18 and gradual adoption of concurrent features.
这是 React Conf 第一次在线举办,并且免费进行直播,翻译成 8 种不同的语言。来自世界各地的参与者加入了我们的会议 Discord 通道以及回放活动,以便在所有时区都能访问。共有超过 50,000 人注册,19 场演讲观看次数超过 60,000 次,两项活动中 Discord 的参与者共达 5,000 人。
🌐 This was the first time React Conf was hosted online, and it was streamed for free, translated to 8 different languages. Participants from all over the world joined our conference Discord and the replay event for accessibility in all timezones. Over 50,000 people registered, with over 60,000 views of 19 talks, and 5,000 participants in Discord across both events.
所有讲座都可以在线播放。
🌐 All the talks are available to stream online.
以下是舞台上分享内容的摘要:
🌐 Here’s a summary of what was shared on stage:
React 18 和并发特性
🌐 React 18 and concurrent features
在主题演讲中,我们分享了从 React 18 开始的 React 未来愿景。
🌐 In the keynote, we shared our vision for the future of React starting with React 18.
React 18 增加了期待已久的并发渲染器,并对 Suspense 进行了更新,而没有任何重大破坏性更改。应用可以升级到 React 18,并开始逐步采用并发特性,其所需的努力与任何其他主要版本相当。
🌐 React 18 adds the long-awaited concurrent renderer and updates to Suspense without any major breaking changes. Apps can upgrade to React 18 and begin gradually adopting concurrent features with the amount of effort on par with any other major release.
这意味着没有并发模式,只有并发特性。
在主题演讲中,我们还分享了我们对 Suspense、服务器组件、新的 React 工作组以及我们对 React Native 的长期多平台愿景的设想。
🌐 In the keynote, we also shared our vision for Suspense, Server Components, new React working groups, and our long-term many-platform vision for React Native.
在这里观看 Andrew Clark、Juan Tejada、Lauren Tan 和 Rick Hanlon 的完整主题演讲:
🌐 Watch the full keynote from Andrew Clark, Juan Tejada, Lauren Tan, and Rick Hanlon here:
面向应用开发者的 React 18
🌐 React 18 for Application Developers
在主题演讲中,我们还宣布 React 18 RC 现在可以试用。待进一步反馈后,这将是我们明年初发布为稳定版的 React 的确切版本。
🌐 In the keynote, we also announced that the React 18 RC is available to try now. Pending further feedback, this is the exact version of React that we will publish to stable early next year.
要尝试 React 18 RC,请升级你的依赖:
🌐 To try the React 18 RC, upgrade your dependencies:
npm install react@rc react-dom@rc并切换到新的 createRoot API:
🌐 and switch to the new createRoot API:
// before
const container = document.getElementById('root');
ReactDOM.render(<App />, container);
// after
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App/>);有关升级到 React 18 的演示,请参见 Shruti Kapoor 的演讲:
🌐 For a demo of upgrading to React 18, see Shruti Kapoor’s talk here:
使用 Suspense 的流式服务器渲染
🌐 Streaming Server Rendering with Suspense
React 18 还包括使用 Suspense 提高服务器端渲染性能的改进。
🌐 React 18 also includes improvements to server-side rendering performance using Suspense.
流式服务器渲染允许你在服务器上从 React 组件生成 HTML,并将该 HTML 流式传输给用户。在 React 18 中,你可以使用 Suspense 将你的应用拆分为更小的独立单元,这些单元可以彼此独立流式传输,而不会阻塞应用的其他部分。这意味着用户将更快看到你的内容,并能够更快开始与其交互。
🌐 Streaming server rendering lets you generate HTML from React components on the server, and stream that HTML to your users. In React 18, you can use Suspense to break down your app into smaller independent units which can be streamed independently of each other without blocking the rest of the app. This means users will see your content sooner and be able to start interacting with it much faster.
深入了解,请参见 Shaundai Person 的演讲:
🌐 For a deep dive, see Shaundai Person’s talk here:
第一个 React 工作组
🌐 The first React working group
对于 React 18,我们创建了第一个工作组,与专家、开发者、库维护者和教育工作者组成的小组进行协作。我们共同努力制定逐步采用的策略,并完善诸如 useId、useSyncExternalStore 和 useInsertionEffect 等新 API。
🌐 For React 18, we created our first Working Group to collaborate with a panel of experts, developers, library maintainers, and educators. Together we worked to create our gradual adoption strategy and refine new APIs such as useId, useSyncExternalStore, and useInsertionEffect.
有关这项工作的概述,请参见 Aakansha’ Doshi 的演讲:
🌐 For an overview of this work, see Aakansha’ Doshi’s talk:
React 开发者工具
🌐 React Developer Tooling
为了支持此版本中的新功能,我们还宣布了新成立的 React 开发工具团队以及一个新的时间线分析器,以帮助开发者调试他们的 React 应用。
🌐 To support the new features in this release, we also announced the newly formed React DevTools team and a new Timeline Profiler to help developers debug their React apps.
有关更多信息以及新 DevTools 功能的演示,请参见 Brian Vaughn 的演讲:
🌐 For more information and a demo of new DevTools features, see Brian Vaughn’s talk:
不使用 memo 的 React
🌐 React without memo
展望更远的未来,黄玄 (Xuan Huang) 分享了我们 React Labs 关于自动记忆化编译器研究的最新进展。查看这个演讲以获取更多信息和编译器原型的演示:
🌐 Looking further into the future, Xuan Huang (黄玄) shared an update from our React Labs research into an auto-memoizing compiler. Check out this talk for more information and a demo of the compiler prototype:
React 文档主题演讲
🌐 React docs keynote
Rachel Nabors 开始了一系列关于使用 React 学习和设计的讲座,其中的主题演讲是关于我们对 React 新文档的投资(现在已发布为 react.dev):
还有更多…
🌐 And more…
我们还听了关于使用 React 学习和设计的讲座:
- Debbie O’Brien: 我从新的 React 文档中学到的东西。
- Sarah Rainsberger:在浏览器中学习。
- Linton Ye:使用 React 进行设计的投资回报率。
- Delba de Oliveira: 使用 React 的互动游乐场。
来自 Relay、React Native 和 PyTorch 团队的演讲:
- Robert Balicki: 重新介绍继电器。
- Eric Rozell 和 Steven Moyes:React Native 桌面。
- Roman Rädle: 用于 React Native 的设备端机器学习
以及来自社区关于可访问性、工具和服务器组件的讨论:
- 加藤大志:外部存储库的 React 18。
- Diego Haz: 在 React 18 中构建无障碍组件。
- Tafu Nakazaki: 使用 React 的可访问日语表单组件。
- Lyle Troxell:面向艺术家的 UI 工具。
- Helen Lin: Hydrogen + React 18。
谢谢
🌐 Thank you
这是我们第一次自己筹划会议,我们有很多人需要感谢。
🌐 This was our first year planning a conference ourselves, and we have a lot of people to thank.
首先,感谢我们所有的演讲者 Aakansha Doshi, Andrew Clark, Brian Vaughn, Daishi Kato, Debbie O’Brien, Delba de Oliveira, Diego Haz, Eric Rozell, Helen Lin, Juan Tejada, Lauren Tan, Linton Ye, Lyle Troxell, Rachel Nabors, Rick Hanlon, Robert Balicki, Roman Rädle, Sarah Rainsberger, Shaundai Person, Shruti Kapoor, Steven Moyes, Tafu Nakazaki, 和 Xuan Huang (黄玄)。
🌐 First, thanks to all of our speakers Aakansha Doshi, Andrew Clark, Brian Vaughn, Daishi Kato, Debbie O’Brien, Delba de Oliveira, Diego Haz, Eric Rozell, Helen Lin, Juan Tejada, Lauren Tan, Linton Ye, Lyle Troxell, Rachel Nabors, Rick Hanlon, Robert Balicki, Roman Rädle, Sarah Rainsberger, Shaundai Person, Shruti Kapoor, Steven Moyes, Tafu Nakazaki, and Xuan Huang (黄玄).
感谢所有帮助提供关于演讲反馈的人,包括 Andrew Clark、Dan Abramov、Dave McCabe、Eli White、Joe Savona、Lauren Tan、Rachel Nabors 和 Tim Yung。
🌐 Thanks to everyone who helped provide feedback on talks including Andrew Clark, Dan Abramov, Dave McCabe, Eli White, Joe Savona, Lauren Tan, Rachel Nabors, and Tim Yung.
感谢 Lauren Tan 搭建会议 Discord 并担任我们的 Discord 管理员。
🌐 Thanks to Lauren Tan for setting up the conference Discord and serving as our Discord admin.
感谢 Seth Webster 对整体方向的反馈,并确保我们关注多样性和包容性。
🌐 Thanks to Seth Webster for feedback on overall direction and making sure we were focused on diversity and inclusion.
感谢 Rachel Nabors 领导我们的审核工作,感谢 Aisha Blake 创建我们的审核指南,领导我们的审核团队,培训翻译员和审核员,并协助审核两个活动。
🌐 Thanks to Rachel Nabors for spearheading our moderation effort, and Aisha Blake for creating our moderation guide, leading our moderation team, training the translators and moderators, and helping to moderate both events.
感谢我们的管理员 Jesslyn Tannady、Suzie Grange、Becca Bailey、Luna Wei、Joe Previte、Nicola Corti、Gijs Weterings、Claudio Procida、Julia Neumann、陈梦迪、Jean Zhang、Ricky Li,以及 Xuan Huang (黄玄)。
🌐 Thanks to our moderators Jesslyn Tannady, Suzie Grange, Becca Bailey, Luna Wei, Joe Previte, Nicola Corti, Gijs Weterings, Claudio Procida, Julia Neumann, Mengdi Chen, Jean Zhang, Ricky Li, and Xuan Huang (黄玄).
感谢 Manjula Dube、Sahil Mhapsekar 和来自 React India 的 Vihang Patel,以及 Jasmine Xie、QiChang Li 和来自 React China 的 YanLun Li 帮助主持我们的重播活动,并让社区保持互动和参与感。
🌐 Thanks to Manjula Dube, Sahil Mhapsekar, and Vihang Patel from React India, and Jasmine Xie, QiChang Li, and YanLun Li from React China for helping moderate our replay event and keep it engaging for the community.
感谢 Vercel 发布他们的 虚拟活动入门工具包,我们的会议网站就是在此基础上构建的,同时也感谢 Lee Robinson 和 Delba de Oliveira 分享他们举办 Next.js Conf 的经验。
🌐 Thanks to Vercel for publishing their Virtual Event Starter Kit, which the conference website was built on, and to Lee Robinson and Delba de Oliveira for sharing their experience running Next.js Conf.
感谢 Leah Silber 分享她举办会议的经验,从举办 RustConf 中的学习,以及她的书 Event Driven 中关于举办会议的建议。
🌐 Thanks to Leah Silber for sharing her experience running conferences, learnings from running RustConf, and for her book Event Driven and the advice it contains for running conferences.
感谢 Kevin Lewis 和 Rachel Nabors 分享他们举办 Women of React 大会的经验。
🌐 Thanks to Kevin Lewis and Rachel Nabors for sharing their experience running Women of React Conf.
感谢 Aakansha Doshi、Laurie Barth、Michael Chan 和 Shaundai Person 在整个规划过程中提供的建议和想法。
🌐 Thanks to Aakansha Doshi, Laurie Barth, Michael Chan, and Shaundai Person for their advice and ideas throughout planning.
感谢 Dan Lebowitz 协助设计和搭建会议网站及票务系统。
🌐 Thanks to Dan Lebowitz for help designing and building the conference website and tickets.
感谢Laura Podolak Waddell、Desmond Osei-Acheampong、Mark Rossi、Josh Toberman以及Facebook视频制作团队的其他成员录制主题演讲和Meta员工讲座的视频。
🌐 Thanks to Laura Podolak Waddell, Desmond Osei-Acheampong, Mark Rossi, Josh Toberman and others on the Facebook Video Productions team for recording the videos for the Keynote and Meta employee talks.
感谢我们的合作伙伴 HitPlay 帮助组织会议、编辑直播中的所有视频、翻译所有演讲,并用多种语言管理 Discord。
🌐 Thanks to our partner HitPlay for helping to organize the conference, editing all the videos in the stream, translating all the talks, and moderating the Discord in multiple languages.
最后,感谢所有参与者让这次 React 大会如此精彩!
🌐 Finally, thanks to all of our participants for making this a great React Conf!