作為一個以英語為母語的人，我必須承認(rèn)，在開發(fā)產(chǎn)品時，我不會第一時間想到本地化。值得慶幸的是，我意識到了這一點(diǎn)，并將在未來更加認(rèn)真地對待它。

我認(rèn)為本地化經(jīng)常會被忽視，因為我們專注于像我們這樣的用戶。你的用戶都和你一樣，這是不現(xiàn)實(shí)的！這就是為什么我們需要進(jìn)行用戶測試，獲得用戶反饋，讓產(chǎn)品對所有類型的用戶，都更具包容性。

去年，納特·艾莉森（Nat Alison）提出了一個問題“ React 是否被翻譯了？”。當(dāng)她最初提出這個問題時，答案是否定的。

為什么這么重要？恩，納特說得很好。如果只有講英語的人可以訪問 React ，那么有多少人無法使用這些工具來開發(fā)出令人贊嘆的產(chǎn)品？只讓說英語的人構(gòu)建我們的數(shù)字世界，我們會損失多少？世界上只有20％的人口說英語。如果我們不幫助別人使用 React，這將是我們自己的損失！

納特（Nat）和成千上萬的人在過去一年中取得了令人難以置信的成就。還有更多工作要做，如果您會說雙語，希望您也可以提供幫助！

9.無障礙馬拉松

就像本地化一樣，可訪問性可能很困難。在開發(fā)可訪問性時，您必須以不同的方式思考。您必須考慮更多的受眾，考慮可能與您不同的人。有時候這很困難，但我們都能做到。

跑馬拉松🏃🏻‍♂️是另一個可能很困難的例子。根據(jù) RunRepeat 的統(tǒng)計，2018年有 1,298,725 人完成了馬拉松比賽。他們并非是完全有能力才去做的。他們從小處著手，并努力達(dá)到目標(biāo)。

這就是我們處理可訪問性的方法。如果您是從頭開始，采取這種方法將消除一些不堪重負(fù)的感覺。我對 React Conf 的最喜歡的事情之一就是從新的角度學(xué)習(xí)軟件開發(fā)和世界。布列塔尼·費(fèi)恩斯特拉（Brittany Feenstra）是幫助我擴(kuò)大視野的人之一，我想進(jìn)一步思考無障礙環(huán)境。

我不會在一夜之間完成無障礙馬拉松比賽，但今后每天我可以做更多的事情。值得慶幸的是，在此過程中有很多優(yōu)秀的工具可以幫助我。

10.您不需要Redux（對嗎？）

2019年，有許多不同的方法來管理 React 狀態(tài)（甚至包括 easy-peasy）。

有這么多的選擇，很難知道什么才是正確的選擇。不幸的是，正確的選擇將取決于你自己。請記住，開發(fā)人員體驗是服務(wù)于用戶體驗。知道了這一點(diǎn)，我喜歡通過盡可能簡單，并隨我的原始決定而改變的方式來進(jìn)行狀態(tài)管理。

我很高興 React 現(xiàn)在內(nèi)置了很多選項。使用 Context 和 Hooks ，您可以做很多事情而無需依賴其他依賴項。

為了快速行動并完成目標(biāo)，您必須愿意放棄以前完成的工作。當(dāng)您的產(chǎn)品與眾不同時，您需要愛上重構(gòu)并推翻之前對您有用的決策。我認(rèn)為 React 狀態(tài)的許多選擇都反映了這一點(diǎn)。有些選項需要很多樣板，有些則不需要。有些是需要包裝的，有些不是?，F(xiàn)在選擇適合自己的感覺，并在以后需要時進(jìn)行調(diào)整。

11.時間旅行到1999

當(dāng)天的最后一次演講讓我對標(biāo)題感到興趣。1999年編程是什么樣的？那時我才九歲。有些人從九歲開始編碼。我不是其中之一。😢

這場談話是另一個確實(shí)需要關(guān)注的話題。李·拜倫（Lee Byron）提供了一顆精心打磨的寶石。在 PHP 和 LAMP 技術(shù)棧成為 Web 開發(fā)工具的時候，他帶領(lǐng)我們走過了一段時期。對于那些沒有在1999年進(jìn)行編碼的人，他解釋了導(dǎo)致 Facebook 開發(fā)諸如 React ， GraphQL 和 Relay 等工具的演變。對于當(dāng)時正在編碼的人心中會充滿留戀。

我一直尊重 Facebook 所做的工程工作，但是這次演講使一切都變得正確更加清晰。使用 React 感覺就像是一種特權(quán)，現(xiàn)在我知道特權(quán)的來源。我受到像 Lee 這樣的人的啟發(fā)，并將繼續(xù)為社區(qū)做事。

12.即使開發(fā)工具也與UX有關(guān)

第二天會議在 Brian Vaughn 的闡述 中繼續(xù)進(jìn)行。如果使用 React 構(gòu)建內(nèi)容，則可能已經(jīng)使用了React Dev Tools。他們無疑幫助我擺脫了自己制造的混亂局面。

React Dev Tools 得到了全面的重寫，其中包括：

•  更好的性能
•  新的API支持
•  UX新功能

看，即使開發(fā)工具也專注于出色的UX！

團(tuán)隊為幫助不熟悉的項目同學(xué)熟悉項目，進(jìn)行的更改使我印象深刻。盡管您可能從未接觸過陌生的代碼，但我們都知道，即使是我們自己的代碼，隨著時間的流逝也會顯得陌生?，F(xiàn)在，我們可以看到 prop 如何流經(jīng)組件，如何過濾組件樹，深入檢查組件以及如何將 hook 與 dev tool 一起使用。我喜歡看到的另一件事是 suspense 的轉(zhuǎn)變。這個功能看似非常簡單，但很快就會變得無價。

連同共享配置文件一起，新的開發(fā)者工具使查找原因的工作變得更加容易。那里有類似的工具，但是現(xiàn)在我們可以直接在開發(fā)工具中了解您的渲染。

還有很多其他很棒的補(bǔ)充，我建議您自己去探索它們。

13.可疑數(shù)據(jù)（Relay 很棒）

我想我可能要接力 Relay 了。實(shí)際上，我很晚開始使用 GraphQL。在我的輔助項目中，我一直在使用 GraphQL ，我非常喜歡它。在這次會議之后，我將探索 Relay，并利用組合提供的功能。

React Suspense 希望使我們能夠顯示某些 UI，而無需等待所有 UI 準(zhǔn)備就緒ready。

讓我們看一個組件的基本示例，該組件在獲取數(shù)據(jù)時顯示加載狀態(tài)（使用 Suspense）： 

const Composer = (props) => {  
  const data = useQuery(graphql`  
    query ComposerQuery {  
      me {  
        photo {  
          uri  
        }  
      }  
    }  
  `, variables);  
  return (  
    <div>  
      <img src={data.me.photo.uri} />  
    </div>  
  );  
}  
const Home = (props) => (  
  <Suspense fallback={<Placeholder />}>  
    <Composer />  
  </Suspense>  
); 

在此示例中，我們有一個 Composer 組件，該組件可獲取個人資料圖片的 URI，然后顯示它。您可以在 Home 將 Composer 包裝在一個 Suspense 塊中的組件中看到。然后，當(dāng)數(shù)據(jù)正在加載時，Placeholder 將被渲染?？梢詫⑦@種模式視為 “渲染時獲取”。

使用此模式，加載順序如下：

如您所見，這使我們能夠輕松處理數(shù)據(jù)加載。我們可以通過使用占位符或 Loading 等加載組件來提供更好的用戶體驗。

上面的模式已經(jīng)帶來了很多收益和靈活性。但是，F(xiàn)acebook 團(tuán)隊不喜歡您必須渲染以找出組件所需的數(shù)據(jù)。為了解決這個問題，他們開始使用一種稱為 “獲取數(shù)據(jù)時渲染” 的模式。

從本質(zhì)上講，為了啟用 “按需渲染” 功能，F(xiàn)acebook 團(tuán)隊已分解 useQuery 為兩部分。它分為 preloadQuery 和 usePreloadedQuery 。這到底是什么意思呢？

preloadQuery

該 API 將獲取數(shù)據(jù)并為結(jié)果提供參考。它沒有提供實(shí)際數(shù)據(jù)。

您將在顯示新用戶界面的同一事件處理程序中調(diào)用此 API。例如，如果用戶單擊將觸發(fā)導(dǎo)航到新頁面的鏈接，則將使用我們處理單擊的事件處理程序 preloadQuery 。將鼠標(biāo)懸停在某處上以打開工具提示將是您調(diào)用此 API 的另一個示例。該 onHover 事件處理程序調(diào)用 preloadQuery 。

usePreloadedQuery

該 API 獲取 preloadQuery 調(diào)用結(jié)果。實(shí)際上，它本身不會進(jìn)行任何數(shù)據(jù)獲取。它查看的當(dāng)前狀態(tài) preloadQuery。如果準(zhǔn)備就緒，它將顯示結(jié)果。如果尚未準(zhǔn)備就緒，它將暫停。如果查詢失敗，則可能引發(fā)錯誤。

無論發(fā)生什么情況，usePreloadedQuery 都永遠(yuǎn)不會觸發(fā)新的提取。這使其高效且可預(yù)測。

代替使用這兩個 API，useQuery 將提供如下所示的加載順序：

我絕對建議您聽喬·薩沃納（Joe Savona）解釋上面我總結(jié)的概念。他講得更好，而且更深入。這是我最喜歡的演講之一，因為我對這種模式所帶來的可能性感到興奮，并且迫不及待地想嘗試一下。

14. React是小說

詹恩·克賴頓（Jenn Creighton）在會議上發(fā)表了我最喜歡的哲學(xué)演講。她從事創(chuàng)造性寫作工作。創(chuàng)意寫作一直是我的最愛。像詹恩一樣，我曾經(jīng)幻想成為作家。她在演講中解釋了一個概念，該概念以一種有趣（且出乎意料）的方式轉(zhuǎn)化為編碼。

顯示，不告訴

讓我們看一下傳達(dá)相同含義的兩種方式（由Jenn提供）。

她累了。

她的步伐變得緩慢，隨著一步一步接近床，她的臉先接觸到了床墊，身體也感覺更加沉重。

相同的想法，對不對？她累極了。哪一個功能更強(qiáng)大？好吧，這很明顯。作為軟件工程師，我們經(jīng)常陷入困境。我們抽象，抽象，抽象，直到我們盡可能地榨干自己。

在大多數(shù)情況下，我會盡力避免代碼重復(fù)。該原理很有意義，但是，就像編寫規(guī)則一樣，有時我們需要打破軟件開發(fā)規(guī)則。讓我們比較兩個獲得相同結(jié)果的不同代碼。 

const Nav = ({ links }) => (  
  <nav>  
    {  
      links.map(link => (  
        <Link to={link.to}>{link.name}</Link>  
      ))  
    }  
  </nav>  
);  
const Header = () => {  
  const links = [  
    { name: 'Home', to: '/home' },  
    { name: 'Settings', to: '/settings' },  
  ];  
  return (  
    <>  
      <Nav links={links} />  
    </>  
  );  
} 

這看起來似乎很好用，但是如果我們想添加一個導(dǎo)航項，該怎么辦？例如登錄按鈕。 

const links = [  
    { name: 'Home', to: '/home' },  
    { name: 'Settings', to: '/settings' }, 
    { name: 'Login', to: '??' },  
  ]; 

我們的 Nav 組件無法處理這種情況。我們可以很容易地實(shí)現(xiàn)一種處理它的方法，但是這很容易失控。我們可以將 Nav 組件重構(gòu)為如下所示： 

const Nav = ({ links }) => (  
  <nav>  
    {  
      links.map(link => {  
        return link.to  
          ? <Link to={link.to}>{link.name}</Link>  
          : <a onClck={link.onClick}>{link.name}</Link>  
      })  
    }  
  </nav>  
); 

這將起作用，但是在難以推理 Nav 組件之前，我們將覆蓋多少個邊緣情況？我們可以用另一種方式重寫 Header 組件。 

const Header = () => {  
  const links = [  
    { name: 'Home', to: '/home' },  
    { name: 'Settings', to: '/settings' },  
    { name: 'Login', to: '??' },  
  ];  
  return (  
    <nav>  
      <Link to="/home">Home</link>  
      <Link to="/settings">Settings</link>  
      <a onClick={onSelectLogin}>Login</a>  
    <nav/>  
  );  
} 

我簡化了詹恩在演講中講的例子，但我認(rèn)為這很重要。第二 Header 部分更容易推論。即使我們現(xiàn)在可能重復(fù)一遍，抽象也沒有帶來太大的好處。如果我們想將一個 Icon 組件添加到其中一個鏈接中，則不必再處理 Nav 組件中的所有極端情況，只需將其添加到所需位置即可。

詹恩（Jenn）還引用了尼爾·蓋曼（Neil Gaiman）的一句話，說我不得不分享。

請記住，或早或晚，在達(dá)到完美之前，你必須放手去做，繼續(xù)接下來的事。

在構(gòu)建心理健康寫作平臺 Wrabit 的時候，我一直在練習(xí)，使得自己變得足夠好。有時候，這讓我覺得自己不像一個開發(fā)人員。有時候讓我感到自己的懶惰。最后，我將介紹易于理解的內(nèi)容，可以提供的內(nèi)容以及以后可以隨時重構(gòu)的內(nèi)容。

正如 Jenn 所說，重構(gòu)并非失敗。她的演講非常巧妙地將創(chuàng)意寫作與編程編織在一起，我一定會再看一遍。

15. UX驅(qū)動的流體動畫

我還沒有制作太多的動畫。我設(shè)想了一個未來，我將從 Dribbble（動畫和所有動畫）中獲得出色的 UI 設(shè)計，并進(jìn)行實(shí)踐設(shè)計。動畫絕對是設(shè)計色情片中令人愉悅的一點(diǎn)，但是即使如此，我們在實(shí)現(xiàn)的時候也要牢記用戶體驗。

像大多數(shù)談話一樣，亞歷克斯·霍爾切克（Alex Holachek）讓我以新的方式思考。我喜歡UI交互。它們讓我感到內(nèi)心溫暖而模糊?？粗麄儠r，我沒有考慮所有用戶而感到內(nèi)疚。

精美的動畫如何對使用 Nokia 6 的用戶起作用？來自亞馬遜的 283.97加元，我買得起新 iPhone 之前的價格要高出很多倍。我猜很多其他人都在同一陣營。

亞歷克斯（Alex）幫助我記住了更多關(guān)于平均值的思考。平均電話，平均數(shù)據(jù)速度。建立平均和高端將永遠(yuǎn)是好的。

此外，event.preventDefault() 還會對滾動產(chǎn)生不良影響。

16.反復(fù)體驗

如果您無法確定，那么今年的會談內(nèi)容千變?nèi)f化。盧卡·德馬斯科（Luca Demasco）通過與 Zach Rispoli 合作開發(fā) Wick 編輯器，向我們展示了迭代過程，從而保持了新鮮感。

Wick 編輯器是一個免費(fèi)的開源工具，可用于創(chuàng)建游戲，動畫以及您能想到的其他任何東西。當(dāng)Luca展示當(dāng)前版本時，UI 確實(shí)給我留下了深刻的印象?？雌饋砗苤庇^，并且具有很多功能。并非總是如此。

盧卡（Luca）和朋友通過不斷的迭代達(dá)到了今天的狀態(tài)。它們也不只是為了迭代而進(jìn)行迭代。他們將Wick帶入了許多不同的環(huán)境（學(xué)校，圖書館等），并使界面出現(xiàn)在許多不同的用戶（初學(xué)者，中級用戶，年輕人，老人）面前。他們采取了獲取，保留，擴(kuò)張 （Laser-Focused Approach） 的方法，并收集了很多反饋，幫助 Wick 成為今天的樣子。

當(dāng)我考慮如何迭代自己的產(chǎn)品時，過程中的誠實(shí)啟發(fā)了我。如何快速啟動并有意地迭代？我沒有那種經(jīng)驗，所以有時信心會使我迷失，但這是我很高興采取的一個過程。看到像 Luca 這樣的人分享他的經(jīng)驗，這使我感到鼓舞，我感謝會議期間每個人都真誠的分享。

17.簡單事物的復(fù)雜性

您是否使用 react-select？沒有？那可能只有你不知道了。

該組件在 GitHub 上擁有超過18000個星標(biāo)。每周有 150 萬次下載。好多啊。

您可能不會想到一個簡單的 React 組件可能會那么復(fù)雜。當(dāng)然，你會錯的。杰德·沃森（Jed Watson）開發(fā)了一個漂亮的 React 組件，并且很好地實(shí)現(xiàn)了它的目的。它具有很多功能，并且開箱即用。

杰德走了一段漫長的（有時是艱苦的）道路，才實(shí)現(xiàn)了 react-select。他對開發(fā)大規(guī)模的流行的開源項目有了深刻的見解。他還展示了簡單的事情通常可能非常復(fù)雜。

當(dāng) Jed 展示了 react-select 到 v2.0 的演變時，我受到了 Jed 的啟發(fā)。他重申了重構(gòu)的重要性以及如果您不想追求完美，就可以隨時停止。

18.優(yōu)雅的透明度

政府支出是一個重要的話題。我們應(yīng)該看到我們的稅收去向，以便使政府負(fù)責(zé)。

Lizzie Salita 證明了政府網(wǎng)站可以高效，易于使用且美觀。當(dāng)她演示 USAspending.gov 支出瀏覽器時，我真的很驚訝。將其與加拿大版本進(jìn)行比較，您將獲得一個示例，該示例可以使用 React 重構(gòu)來提升用戶體驗。

我正在慢慢地開始涉足政治領(lǐng)域。盡管我一直在努力保持足夠的知情權(quán)以便投票，但我還有很多事情要做。擁有諸如 USAspending.gov 之類的工具，將使它變得更加輕松有趣。我認(rèn)為我們應(yīng)該繼續(xù)開發(fā)這樣的工具，以使每個人都能了解最新情況，以便我們所有人都可以參與塑造我們的未來。

19.奇跡驅(qū)動的開發(fā)

會議的最后一次演講真讓我震驚。像亞歷克斯·安德森（Alex Anderson）一樣，我是太空的忠實(shí)粉絲。亞歷克斯（Alex）建立了一個瘋狂的復(fù)雜的星艦?zāi)M器，名為Thorium。

Thorium模擬器使諸如獅門空間中心之類的許多組織能夠為各種人提供與 STEM 相關(guān)的活動。這些空間中心使學(xué)生能夠通過高度互動性和教育性的小組活動來成長。

React Conf 上幾乎所有的演講，人們都在為正當(dāng)理由做著鼓舞人心的事情。亞歷克斯的工作之所以突出，是因為他的熱情從他所說的每句話中泄漏出來。他熱愛自己的工作，并且是一位非常有才華的工程師。他正在使用可用的技術(shù)為孩子和成年人建立良好的體驗。

我最喜歡從 Alex 的演講中脫穎而出（這需要我花一點(diǎn)時間才能完全理解）是奇跡驅(qū)動開發(fā)的概念。您是否想過技術(shù)的可能性？那你有什么能力呢？🤔

這些類型的問題驅(qū)使我們建立有趣，愉快和真正美好的體驗。這些類型的問題使 Facebook 的工程師和世界各地的公司可以利用技術(shù)來塑造我們的世界。

我從今年在 React Conf 上遇到的每個人學(xué)到了很多東西。我很高興能夠參加，并感到充滿驚奇和興奮。

我等不及要看什么奇跡驅(qū)使我成長！

如前所述，這些只是我的一些收獲。在為期兩天的會議中，共享了許多庫，技術(shù)和哲學(xué)思想。我希望我能抓住他們?nèi)?！如果你明年去，你會明白我的意思?/p>

如果您希望我擴(kuò)展這些想法，我將非常樂意。伸出手，讓我知道！

最后，更不用說德文·林賽了。她給了我們笑聲，糖果和內(nèi)部的活動。沒有她，這次會議就不會一樣。