簡介： 個人對本屆 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開發
