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

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

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

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

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

9.無(wú)障礙馬拉松

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

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

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

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

10.您不需要Redux（對(duì)嗎？）

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

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

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

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

11.時(shí)間旅行到1999

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

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

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

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

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

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

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

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

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

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

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

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

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

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

讓我們看一個(gè)組件的基本示例，該組件在獲取數(shù)據(jù)時(shí)顯示加載狀態(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>  
); 

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

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

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

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

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

preloadQuery

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

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

usePreloadedQuery

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

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

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

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

14. React是小說(shuō)

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

顯示，不告訴

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

她累了。

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

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

在大多數(shù)情況下，我會(huì)盡力避免代碼重復(fù)。該原理很有意義，但是，就像編寫(xiě)規(guī)則一樣，有時(shí)我們需要打破軟件開(kāi)發(fā)規(guī)則。讓我們比較兩個(gè)獲得相同結(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} />  
    </>  
  );  
} 

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

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

我們的 Nav 組件無(wú)法處理這種情況。我們可以很容易地實(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 組件之前，我們將覆蓋多少個(gè)邊緣情況？我們可以用另一種方式重寫(xiě) 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/>  
  );  
} 

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

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

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

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

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

15. UX驅(qū)動(dòng)的流體動(dòng)畫(huà)

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

像大多數(shù)談話(huà)一樣，亞歷克斯·霍爾切克（Alex Holachek）讓我以新的方式思考。我喜歡UI交互。它們讓我感到內(nèi)心溫暖而模糊。看著他們時(shí)，我沒(méi)有考慮所有用戶(hù)而感到內(nèi)疚。

精美的動(dòng)畫(huà)如何對(duì)使用 Nokia 6 的用戶(hù)起作用？來(lái)自亞馬遜的 283.97加元，我買(mǎi)得起新 iPhone 之前的價(jià)格要高出很多倍。我猜很多其他人都在同一陣營(yíng)。

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

此外，event.preventDefault() 還會(huì)對(duì)滾動(dòng)產(chǎn)生不良影響。

16.反復(fù)體驗(yàn)

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

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

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

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

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

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

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

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

杰德走了一段漫長(zhǎng)的（有時(shí)是艱苦的）道路，才實(shí)現(xiàn)了 react-select。他對(duì)開(kāi)發(fā)大規(guī)模的流行的開(kāi)源項(xiàng)目有了深刻的見(jiàn)解。他還展示了簡(jiǎn)單的事情通?？赡芊浅?fù)雜。

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

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

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

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

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

19.奇跡驅(qū)動(dòng)的開(kāi)發(fā)

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

Thorium模擬器使諸如獅門(mén)空間中心之類(lèi)的許多組織能夠?yàn)楦鞣N人提供與 STEM 相關(guān)的活動(dòng)。這些空間中心使學(xué)生能夠通過(guò)高度互動(dòng)性和教育性的小組活動(dòng)來(lái)成長(zhǎng)。

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

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

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

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

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

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

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

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