React v16.0正式版發佈

原文：deploy-preview-10824--reactjs.netlify.com/blog/2017/0…

咱們很高興的宣佈React v16.0發佈了，此次版本的新增了一些呼聲很高的特性，包括支持render返回數組和字符串、錯誤處理、portals、自定義DOM屬性、優化服務器端渲染以及減小文件大小。

支持render返回數組和字符串

你如今能夠經過render方法返回一個包含元素的數組：

render() {
  // 再也不須要在外邊包裹一個額外的元素！
  return [
    // 不要忘記加key哦 :)
    <li key="A"/>First item</li>,
    <li key="B"/>Second item</li>,
    <li key="C"/>Third item</li>,
  ];
}複製代碼

同時也支持返回字符串。

API 文檔

更好的錯誤處理

在此以前，React在渲染時運行錯誤會致使渲染中斷，接着拋出一個使人匪夷所思的錯誤以及要求刷新頁面來恢復。爲了解決這個問題，React16 使用了更有彈性的錯誤處理策略。若是在組件的render方法或者生命週期方法中拋出錯誤，整個組件會被卸載。這樣能夠阻止顯示錯誤的頁面。然而這可能不是理想的用戶體驗。

每當錯誤發生時，你可使用錯誤邊界而不是卸載整個應用。錯誤邊界是一個特殊的組件，捕捉組件樹的錯誤而後顯示降級的UI來提高體驗。其實錯誤邊界就像try-catch語句，只不過是用於React。

想得到更詳細的信息, 查看咱們以前的文章.

Portals

Portals提供一個方法來渲染DOM層級以外的DOM節點。

render() {
  // React不須要建立一個新的div。將被渲染到`divNode`中。
  // `divNode` 是一個在DOM中任何地方都有效的節點。
  return React.createPortal(
    this.props.children,
    divNode,
  );
}複製代碼

查看完整portals示例

更好的服務器端渲染

再也不要求初始渲染和服務器的結果徹底匹配，取而代之的是嘗試重用更多已存在的節點。減小校驗！

服務器端渲染的特性被徹底重寫以支持數據流。React核心團隊成員Sasha Aicken（主要負責這個特性），他寫了一篇很牛逼的文章來描述React16服務器端渲染的提高：「對流的渲染能夠節省時間，在document後面部分生成以前就能夠把document前面部分發送給瀏覽器。全部主流的瀏覽器，都會在當服務器傳輸流時，開始解析和渲染document。」

支持自定義DOM屬性

React將再也不忽略未被識別的HTML和SVG屬性，React會將它們傳遞給DOM。這樣還帶來一個好處就是容許咱們把它們從React屬性的白名單剔除出去，從而減少了文件大小。

縮小React的體積

儘管內容有所增長，但React 16的實際大小比起15.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（壓縮文件34.8kb）。

與前一個版本相比，大小減小了32%（壓縮後大小減小了30%）。

體積的縮小主要是由於打包方式的改變。React使用Rollup 來爲不一樣的目標格式建立bundles，帶來的結果不只僅是體積減少也使得運行時性能獲得提高。

全新架構

React16是在新架構之上第一個版本，代號「Fiber」。

此次發佈的大部分特性，好比錯誤邊界和fragments，都是重寫核心代碼實現的。在接下來的幾個版本中，你能夠期待更多的特性，由於React的無限潛能已經被激發出來了。

咱們正在開發異步渲染———一種瀏覽器按期協同渲染策略，異步渲染會使應用響應更穩定，由於React不會阻塞主線程。

咱們認爲異步渲染是一個很好的解決方案，它也表明了React將來的方向。這個特性會盡量平順的遷移到v16.0，目前咱們尚未啓用任何異步特性，可是咱們很高興會在接下來幾個月推出這一解決方案，請持續關注！

升級

儘管React16包含了很重大內部改變，但在升級方面，和以前發佈React版本同樣。在通常狀況下，若是你的應用運行在15.6上沒有任何警告提示，那就能夠運行在16上。

注意

若是你在服務器端渲染HTML，請使用ReactDOM.hydrate替換ReactDOM.render。若是你只是在客戶端渲染，那麼請繼續使用ReactDOM.render。

重大改變

• unstable_handleError方法更名爲componentDidCatch，你能夠用codemod自動遷移到新的API。

• 若是在生命週期中調用ReactDOM.render 和 ReactDOM.unstable_renderIntoContainer這兩個方法會返回null，若是真有這種需求，可使用portals或者refs。

• setState:

  • 調用setState傳入null將不會觸發更新。

  • 直接在render方法中調用setState會致使更新。無論怎樣，你也不該該在render方法中調用setState。

  • setState的回調函數（第二個參數），在componentDidMount 或 componentDidUpdate方法執行後當即調用。

• 當用<B />替換<A />，B組件的componentWillMount會在A組件的componentWillUnmount以前執行。

• 在此以前，改變組件的ref，總會在調用改組件render方法以前分離ref，如今是讓它在 DOM 變動後再作改變。

• 經過非React方式修改組件後從新渲染是很不安全的，雖然在以前的版本中可行，可是如今咱們會拋出警告，除非你使用ReactDOM.unmountComponentAtNode來清除你的組件樹。查看示例

• componentDidUpdate生命週期不會再返回prevContext 參數。(查看 #8631)

• 淺渲染不在調用componentDidUpdate()，由於DOM的refs是不可用的。這也使得它和componentDidMount()保持一致（componentDidMount()在以前的版本也是不會調用的）。

• 淺渲染再也不執行unstable_batchedUpdates()

打包

• 再也不有react/lib/* 和 react-dom/lib/*兩個路徑。即便是在CommonJS環境中，React和ReactDOM預編譯成一個單獨的文件。若是你以前依賴React內部文件，而且再也不工做了，那麼請告訴咱們你的具體狀況，咱們會嘗試爲你制定遷移策略。

• 再也不有react-with-addons.js編譯版本，全部兼容的插件都會在npm上單獨發佈，若是你須要的話有單個文件應用於瀏覽器的版本。

• React.createClass 如今等同於 create-react-class， React.PropTypes 等同於 prop-types, React.DOM 等同於 react-dom-factories, react-addons-test-utils 等同於 react-dom/test-utils, 以及淺渲染等同於 react-test-renderer/shallow，請參閱 15.5.0 和 15.6.0 的文章 來遷移代碼。

• 應用於瀏覽器的單個文件的文件名和路徑被修改了，目的是爲了區分開發模式和生產模式，好比：

  • 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

完