[譯文]React v16.0

查看原文內容

---

咱們很高興的宣佈React v16.0發佈了! 這個版本有不少長期被使用者期待的功能，包括：

• fragments (返回片斷類型)
• error boundaries（處理錯誤）
• portals (掛載方式)
• custom DOM attributes （支持自定義DOM屬性）
• improved server-side rendering (提高服務端渲染性能)
• reduced file size (減小文件大小)

（下面逐一說明）

render函數可返回新的類型：數組和字符串

新的版本支持組件的render方法返回包含元素的數組類型，代碼以下：

render() {
     //不須要再把全部的元素綁定到一個單獨的元素中了
      return [
        // 別忘記加上key值
        <li key="A"/>First item</li>,
        <li key="B"/>Second item</li>,
        <li key="C"/>Third item</li>,
      ];
    }

新的版本也支持render方法返回的類型爲strings。

關於render()方法的詳細說明，請查看API文檔。

更好的處理錯誤

以前的React,渲染過程當中若是遇到運行時的錯誤，可能會致使整個React組件的崩潰，併產生一些隱藏的錯誤信息，須要從新刷新才能恢復。爲了解決這個問題，React16 使用了一個更有彈性的錯誤處理策略。默認狀況下，若是一個錯誤是在組件的渲染或者生命週期方法中被拋出，整個組件結構就會從根節點中卸載。這種方式阻礙了被壞數據的展現，然而，卻不是很好的用戶體驗。

新的策略，對於這種一出現錯誤就卸載整個組件app的方式進行了改善，你可使用error boundaries（錯誤邊緣）來進行處理，它是專門用來抓取其下子組件錯誤並向視圖展現錯誤信息的組件。將error boundaries（錯誤邊緣）想象成try{}catch(){}語句，只是它是React專用而已。

想要查看更多關於這個特性的說明，請查看這篇文章。

掛載方式

Portals（掛載方式）提供了一個很是好的方式，能夠將渲染的children插入到一個DOM節點，而這個節點能夠是存在於當前組件dom結構外的其餘節點。

render() {
      // 能夠沒必要建立一個新的div標籤，divNode是一個存在於dom結構的節點，不須要考慮這個節點的位置
      return React.createPortal(
        this.props.children,
        divNode,
      );
    }

查看完整的例子

更好的服務端渲染

React16更好的支持服務端html的渲染，再也不須要服務端進行初始化渲染以匹配結果了，它會嘗試從新利用盡量多的已經存在的DOM節點。

服務端渲染器被徹底重寫用以支持流。React的核心成員Sasha Aicken，它是這個功能的貢獻者，寫了一篇很是好的文章來描述React16 SSR的提高。「渲染流的方式可以減小獲取響應首字節前所花費的毫秒數(TTFB),將頁面文檔的開頭沿着電纜發送到瀏覽器端時，下一部分的頁面文檔已經造成了。用這種流的方式，全部的主流瀏覽器都會更早的開始解析和渲染頁面文檔」。

支持自定義的DOM屬性

取代以前忽略不識別的HTML和SVG屬性的方式，新的版本將會把它們傳遞給DOM元素。這個新特性會讓咱們擺脫可用的React屬性白名單，從而減小文件的大小。

減小文件體積

除了上面提交到的這些特性，React16要比v15.6.1更小！

• react 大小從以前的20.7kb(壓縮後6.9kb)下降到如今的5.3kb (壓縮後2.2kb)。
• react-dom 從以前的141kb(壓縮後42.9kb)下降到如今的103.7kb(壓縮後32.6kb)。
• react + react-dom 從以前的161.7kb(壓縮後49.8kb)到如今的109kb(壓縮後43.8kb)。

文件大小的變化部分歸功於打包工具的改變。React如今使用Rollup針對不一樣的目標格式建立打包，進而使文件大小和運行時性能都表現優秀。

新的核心架構

React16是React第一個創建在一個稱爲"Fiber"全新架構的版本。你能夠經過閱讀Facebook的工程博客瞭解Fiber所有的內容。

這個版本中的大部分功能，好比error boundaries和fragments，這都是經過重寫和核心架構來實現這些可能的。而過後的幾個版本中，你可以回去更多的新特性，由於咱們會開始全力釋放React的所有潛能。

也許最讓人興奮的地方是咱們正致力於async rendering（異步渲染）的工做 —— 這個策略能經過週期性的向瀏覽器發佈執行任務從而協同調度渲染工做。結果就是使用異步渲染，應用將會更加響應式，由於React避免了主線程的阻塞。

咱們認爲異步渲染是一個充滿意義的功能，它表明了React的將來。爲了可以保證現有項目平滑的融合v16.0版本，這個版本咱們並無啓動任何異步的特性，可是在接下來的幾個月裏咱們會很是高興的請它隆重登場。請你們拭目以待！

---

升級

就長期的升級來講，儘管React16只是包括了一些有意義的內部改變，這個版本和其餘主要的React版本仍可勢均力敵。在今年早期的時候，新版版已服務於React和Messenger.com，而後咱們經過發佈一些beta版本和候選版原本解決增長的問題。除少數例外，若是你的項目使用v15.6版本沒有任何警示，那麼能夠升級到v16來服務項目了。

棄用

Hydrating一個服務端渲染的容器如今有了一個明確的API，若是你要進行服務端渲染，請使用ReactDOM.hydrate方法替換ReactDOM.render，客戶端的渲染請保持使用ReactDOM.render方法。

突破變化

• React15有侷限，使用未被文檔化的unstabel_handleError來支持error boundaries。在新版本中，這個方法被命名爲了componentDidCatch。你可使用codemod將項目自動遷移到新的API上。
• 若是ReactDOM.render和ReactDOM.unstable_renderIntoContainer在生命週期方法中被調用，則返回null。爲了解決這個問題，你可使用portals或者refs

• setState:

  • setState參數爲null的狀況下不會再觸發更新。這容許你決定一個更新方法若是你想從新渲染。
  • 在render方法中使用setState會觸發更新。這在以前是不被容許的，可是如今嗎，咱們仍然建議不要在render中觸發setState。
  • setState函數的回調（第二個參數）會在ComponentDidMount/componentWillUnmount方法會當即被觸發，而不是等全部組件從新渲染後再觸發。
  • 當使用組件<A/>替代<B/>時，B.componentDidMount如今必定會出如今A.componentDidUnmount以前。而在以前，A.componentDidUnmount只會在某些狀況下首先發生。
  • 以前，當改變一個組件的ref時，ref和dom會在組件的render方法被調用以前分離。如今，咱們延遲了ref的改變，直到dom元素被改變了，ref纔會和dom分離。
  • 對於不使用React而是使用其餘方法來從新渲染容器是不安全的。這在之前的版本中也許會生效，可是咱們以爲不支持這樣作。如今對於這種狀況咱們會發出一個警告，你須要使用ReactDOM.unmountComponentAtNode來清空你的節點樹。看這個栗子
  • componentDidUpdate生命週期再也不接受prevContext參數。
  • shallow render再也不調用componentDidUpdate()由於DOM refs再也不有效。
  • shallow renderer再也不實現unstable_batchedUpdates()。

打包

• 再也不有react/lib/ 和 react-dom/lib/。即便在CommonJS環境下，React和ReactDOM都會預編譯成單獨的文件("flat bundles")。若是你的項目以前依賴於沒有文檔化的React內部方法，可是如今它們再也不有效，聯繫咱們讓咱們知道你的特殊栗子，咱們會盡可能提出一個可融合方案。
• 再也不構建react-with-addons.js。全部兼容的插件都會發布到npm上，若是你須要咱們也提供了瀏覽器單文件版本。
• 在15.x中啓用部分的介紹已經在覈心包中被去掉了。以下的這些方法是等效的，
  React.createClas <=> create-react-class，React.ProprTypes <=> prop-types，React.DOM <=> react-dom-factories, react-addons-test-utils <=> react-dom/test-utils,shallow renderer <=> react-test-renderer/shallow。能夠查看15.5.0及15.6.0版本的博客以瞭解融合代碼及自動化codemods。

• 瀏覽器單文件版本構建文件的名字和路徑的改變是爲了強調開發和生產環境的不一樣。以下所示：

  • react/dist/react.js -> react/umd/react.development.js
  • react/dist/react.min.js -> react/umd/react.production.min.js
  • react-dom/dist/react-dom.js -> react-dom/umd/react-dom.development.js
  • react-dom/dist/react-dom.min.js -> react-dom/umd/react-dom.production.min.js

( Over... )