標籤：

【譯】React 16 測試版本

01-30

原文：github.com/facebook/rea

譯者：百度外賣FE - 徐冉

譯者注：React 16 beta版發布了。翻譯了官網上的文檔，方便大家閱讀。時間匆忙，有翻譯的晦澀、錯誤之處，懇請大家批評指正。本文也轉載在我的簡書上，請指正：jianshu.com/p/b3d157a29

React 16 beta版公測開始啦！！??

安裝指南

測試版已經在npm包中發布了，標籤是「next」。 常規的npm安裝將繼續安裝15.6版。要安裝測試版需要使用以下命令：

yarn add react@next react-dom@next

或者:

npm install --save react@next react-dom@next

對你來說，React 16意味著什麼？

React 16是第一個對React核心代碼（之前的代號是「Fiber」）進行重寫的版本。重寫有以下幾個目標：

  • 移除了一些舊的內部抽象，它們發展的不好，阻礙了內部變更。
  • 實現一些備受期待的功能，比如： 在render中返回數組、 組件錯誤恢復以及跟蹤每個錯誤的可讀組件堆
  • 開發者可以嘗試對組件進行非同步渲染，以獲得更好的呈現效果

React 16.0主要關注與現有app的兼容性。目前還不支持非同步渲染。在後期的 React 16.x版本的發布過程中，我們將加入非同步模式的選擇項。我們並不期待 React 16.0會給你的app帶來多大的速度上的改變，但是我們卻很關注你是否看到了進步，或者退步。

環境要求

React 16依賴於Map和Set這一類型集。如果你所支持的老式瀏覽器和設備本身不提供(如 <IE11)，請考慮在你的應用bundle中加入一個全局polyfill，比如core-js或是babel-polyfill。

在使用core-js的React 16 的polyfill環境中，支持舊版本瀏覽器的寫法如下：

import core-js/es6/map;nimport core-js/es6/set;nnimport React from react;nimport ReactDOM from react-dom;nnReactDOM.render(n <h1>Hello, world!</h1>,n document.getElementById(root)n);n

React同樣依賴於requestAnimationFrame（測試環境也是如此）。測試環境中，一個簡單的shim如下：

global.requestAnimationFrame = function(callback) {n setTimeout(callback, 0);n};n

興趣點

  • 這是對React完全的重寫，但是我們還是期望能與你現有的代碼兼容。如果你修復了15.x版本中引入的所有deprecation警告，那16beta版本就可以完美運行了。
  • 用戶需要更新依賴於棄用或是不支持的API的第三方庫以保證其在新版本下正常運行。現在正是對存在問題的庫提出issue的好時機。
  • 我們尤其感興趣的是來自於用戶的關於15.x和16.x兩個版本之間的不同表現的反饋。或許沒有什麼巨大變化，但是我們還是想聽聽有哪些進步或是退步。請在這裡指出來！
  • 伺服器渲染器被完全重寫，現在提供一種流模式（現在通過react-dom/node-stream來實現不過未來可能會有變化）。伺服器渲染器不再使用標記驗證，而是盡量與已存在的DOM相關聯，並對不一致發出警告。伺服器渲染器的代碼還很新，因此可能會存在issue。請在這裡提出來。
  • React Native屬於不同的發布周期，它的測試版本將在未來發布。

突破性變更

錯誤處理

  • 以前，runtime錯誤會使React的state終止併產生含混不清的錯誤。 React 16修復了這一點，引入了一種叫做「error boundaries」的特殊組件。Error boundaries能在組件樹中捕獲runtime錯誤，記錄錯誤，同時顯示一個備選UI。
  • 如果組件中存在未捕獲的的錯誤，那麼組件樹中就不存在error boundary，那麼整個組件樹就會unmounted。這樣做有利於避免那些臟bug打斷UI的顯示，但這也意味著開發者需要在app中添加一些error boundary來優雅地處理錯誤。
  • React 15對error boundaries也有支持，但未被寫進文檔，方法名也不同。React 15名叫unstable_handleError，現在更名為：componentDidCatch

點擊這裡了解更多關於錯誤處理行為的信息.

進程安排和生命周期

  • 現在，如果在一個生命周期的方法中使用ReactDOM.render() 和ReactDOM.unstable_renderIntoContainer() 則會返回null。
  • 為了應對這一點，開發者可以使用the new portal API 或者是 refs.
  • setState:
    • setState為空將不會再觸發更新。開發者可以在更新函數中決定是否需要重新渲染。
    • 在render中直接調用setState總是可以導致更新。這與之前不同。儘管如此，開發者還是不應該在render過程中調用setState。
    • setState回調（第二個參數）在componentDidMount / componentDidUpdate後會立即觸發，而不是在所有組件渲染完成之後。
  • 當使用<A />替代<B />的時候， B.componentWillMount總是會在A.componentWillUnmount之前發生。以前，A.componentWillUnmount總是會在某些事件中首先結束。
  • 以前，更改一個組件的引用總會將其在調用組件渲染之前與組件分離。現在我們將其延後，在變化應用到DOM時才更改引用。
  • 使用除了React之外的工具更改容器內容並重新渲染是很不安全的。這樣做雖然有效，但卻從不受支持。現在，我們會對這種做法發出警告。開發者可以清空組件樹並使用ReactDOM.unmountComponentAtNode. 參見此例.
  • componentDidUpdate生命周期不再接收prevContext參數。（參見 #8631）

打包

  • react/lib/* 和 react-dom/lib/*已經被移除了。即使在CommonJS環境中，React和ReactDOM都會被提前編譯為一個單獨的文件（「flat bundles」）。如果開發者之前依賴於非文件記錄的內部構建，而他們現在又失效了，請在此issue下告知我們您的具體情況，我們會嘗試為您提出遷移方案。
  • react-with-addons.js構建也被移除了。所有兼容性擴展在npm上分開發布，也有單文件瀏覽版本供開發者參閱。
  • 在15.x版本中引入的deprecations現在從核心包中移除了。React.createClass 現在改為 create-react-class, React.PropTypes改為 prop-types, React.DOM 改為 react-dom-factories, react-addons-test-utils 改為 react-dom/test-utils, and 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

推薦閱讀：

※React + HOC + Redux 極簡指南

TAG:React | 前端开发 |