原文：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?！?/p>

支持自定義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

完

總結

以上是生活随笔為你收集整理的React v16.0正式版发布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。