React 16 發佈啦。。渣渣看了一下更新文檔~

React 又雙叒更新啦~ 此次是React v16.0，其實在前段時間就知道最近要發佈了。協議更新了。。。來看看其餘的變化吧。本身看着玩的。。期待官方中文文檔的更新。。

---

原文地址：React v16.0

咱們很高興地宣佈發佈React v16.0了！ 其中的一些變化是一些長期的功能請求，包括 fragments ，邊界錯誤， portals ，支持自定義 DOM 屬性，更好的服務器端渲染以及減少了文件大小。

新的render()返回類型

你如今能夠在一個組件的 render 方法中中返回一個元素數組。就像其它數組同樣，你須要爲每個數組元素添加一個 key 來避免 key warning 。

render() {
  // 不須要將列表項包含在一個額外的元素中了
  return [
    // 不要忘了添加key哦 :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

將來咱們可能會向JSX添加一種不須要帶有 key 屬性的特殊的 fragments 。

同時，咱們也使 render 能夠返回一個字符串：

render() {
  return 'Hello React 16!';
}

更好的錯誤處理機制

之前，渲染過程當中的運行錯誤可能會使 React 處於崩潰狀態，還會產生隱藏的錯誤消息，並須要頁面刷新才能恢復。爲了解決這個問題， React 16 使用了一種更靈活的錯誤處理機制。默認狀況下，假如組件的 render 或生命週期的其它方法中拋出了錯誤，整個組件樹會從根卸載。這樣作是爲了阻止損壞數據的顯示。然而，這可能還不是最理想的用戶體驗。

每次發生錯誤時，不會卸載整個app，你能夠看到錯誤邊界（error boundaries）。錯誤邊界是能夠在子樹內部捕獲錯誤的一種特殊組件，而且顯示一個可顯示的回退版本UI。能夠把錯誤邊界當作是對於React的 try-catch 語句。

若是想了解更多，能夠看這：previous post on error handling in React 16

Portals

Portals 提供了一種一流的方法，將子節點渲染到父節點以外的 DOM 節點中。

render() {
  // React 不會建立一個新的div。它會像`donNode`中渲染子組件。
  // `domNode` 是任何有效的DOM節點，不管它處於DOM中的哪一個位置。
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

查看更全面的例子：documentation for portals.

更好的服務端渲染

React 16 包含了一個徹底重寫的服務端渲染器（randerer）。它真的很快，由於它支持流（streaming），因此能夠向客戶端更快地發送字節。

支持自定義DOM屬性

以前咱們忽略沒法識別的 HTML 和 SVG 屬性，新版本中， React 能夠將它們傳遞給 DOM 了。這樣還有額外的好處，去除了 React 屬性的白名單列表，從而減小了文件大小。

削減文件大小

儘管增長了這些新特性，可是 React 16 實際上比 15.6.1 更小！

• react 是5.3kb（gzip：2.2kb），以前是20.7kb（gzip：6.9kb）
• react-dom 是103.7kb（gzip：32.6kb），以前是141kb（gzip：42.9kb）
• react + react-dom 是109kb（gzip：34.8kb），以前是161.7kb（gzip：49.8kb）

相比之前的版本，小了32%（gzip後小了30%）。

MIT 協議

React 16 的協議已是 MIT 協議了，固然，也把已經發布的15.6.2頁改爲MIT協議了。