简介： 个人对本届 React Conf 的一些精华总结
作者 | Anthony Morris
译者 | 王强
策划 | 王文婧
这篇文章是我个人对本届 React Conf 的一些精华总结。所有讲座都值得一看，所以我建议大家回顾第一天和第二天的所有录像 [1]。我在文末给每个讲座都注明了视频时间戳。
总结的有些内容可能会让你感到惊讶，其实我也是！这些内容并不都是技术主题的，但是都贯穿着同一条主线。
一切都是为了服务于开发者体验
Tom Occhino 提到这个话题后我就一直在思考它。其实所有演讲中都能看到这种思想的影子，这也是为什么我如此热爱开发工具和前端的原因所在。
React 旨在创造一种开发体验，使开发者们能够更加 轻松 的学习并实现更加强大的功能，通过更快的迭代来 提高生产力，以及 提升 开发软件的规模。这些事情使我像 React 一样。我觉得 Facebook 在交付方面做得很好。
这一切有什么意义呢？很简单，我们做这些就是为了改善用户体验，为了提升用户的生产力。我们要帮助他们，让他们用优雅的方式来实现目标。虽然我们背后要做的工作可能不会都那么轻松，但我们应该让用户感受到如沐春风。
由于 React 是一种网关技术，而且有 63％的 JavaScript 开发人员正在使用它，因此他们的团队非常重视社区。他们通过了《贡献者公约》[2]，欢迎大家提出批评。作为一个社区，我们应该能够接受批评，而不是处处为自己辩护。Elbert Hubbard 说：“不想要批评的话，除非我们什么都不说、什么都不做、什么都不承担。” React 所做的事情以及其原因才是关键所在。这自然会招致批评，进而让技术不断成长。
令人欣喜的易用性、性能和并发模式
你在使用 React 时是否遇到过焦点问题？我就遇到过。焦点确实很重要 [3]，原因有很多，它可以帮助人们浏览页面，这对不用鼠标的用户来说非常重要，稍后会再讨论这个话题。总之我们很高兴看到 React 团队准备将可访问性纳入架构之中。
大会期间我思考最多的事情之一就是性能。Facebook 要处理的一些性能问题是我们大多数人永远都遇不到的，但他们从这些教训中所学到的知识仍然可以用来改善用户体验。重点在于感知到的速度，而不是单纯的页面加载延迟。
Yuzhi Zheng 在她的演讲中讲了选择性 Hydration 的例子 [4]。你可能也听说过 Suspense，它能改善 Web 上的整体用户体验。
并发模式
假如我们要制作一个关联用户输入的可过滤列表。用 React 来做时，除非你不在乎性能，否则你就得对列表的更新做防抖和优化。
并发模式能让 React 对低优先级的工作中断响应，从而提升 React 应用的响应速度。这使得用户输入之类的事情，比重新渲染列表之类的事情具备更高的优先级。React 将可以同时处理多个状态更新，这将帮助我们消除卡顿和过于频繁的 DOM 更新，还可以让我们能优先处理悬停和文本输入之类的交互，我们知道用户希望这些内容能够快速的被处理处理。
React 团队分享了许多并发模式的示例，建议参考下方链接。
https://reactjs.org/docs/concurrent-mode-patterns.html
CSS-in-JS-at-FB
Frank Yan 宣布 Facebook 正在构建自己的 CSS-in-JS 库，我很感兴趣。刚开始我觉得难道我们目前的库还不够吗？这使我们有机会进一步了解 Facebook 面临的一些扩展问题，以及他们解决问题的创造性方式。
CSS 的维护工作很容易失控。来看下面的例子：
<code>.blue { color: blue; }
.red { color: red; }/<code> <code>Which color will I be?
/<code>
示例中，我们希望文本结果为 blue。因为这个类在类声明中排第二，因此我们应该可以认为它具有优先权。但事实并非如此。.red 类在层叠样式表中排第二，所以会优先展示为红色。如果这些类位于不同的样式表中，则它们在页面中的加载顺序就会很重要。这个例子很简单，但这么简单的问题也会失控。Facebook 想靠他们的新的库来解决特异性战争、主题化和可访问性之类的问题。
演讲中的一些有趣的细节：
开发人员能以像素为单位来编码，然后在 REM 中编译；
他们通过实现类型检查（捕获和修复错字、检测和删除未使用的样式、避免跨浏览器陷阱）来提升安全性；
向开发人员显示可访问性错误；
组件可以有能被覆盖的默认样式（包括类型安全！）；
重复规则会被移除，这样 CSS 文件就能瘦身了（Facebook 最近重写了前端，从 413kb 瘦身到 74kb）。
原子 CSS
每个类都创建一个唯一的属性值，这是用来优化组件的。
https://youtu.be/UxoX2faIgDQ?t=4939
<code>.c0 { color: blue; }
.c1 { color: red; }
.c2 { font-size: 16px; }/<code><code>// Generated Component (Pre-Optimized)
const styles = {
blue: {color: 'c0'},
default: {color: 'c1', fontSize: 'c2'},
};
function MyComponent(props) {
return (
Hello World!
);
}/<code>这个例子展示了 CSS 怎样原子化，它还展示了如何使用 props 设置 span 的颜色，但这段代码还能进一步优化。
<code>// The styles block is no longer needed
function MyComponent(props) {
return (
Hello World!
);
}/<code>这些东西非常有趣，我期待能尽快看到他们发布这个库。
文章进行了部分删减，完整内容请点击下方[了解更多]
关键字：前端开发 JavaScript API PHP 开发工具 UED 网络架构 数据格式 开发者 iOS开发
