React 16 更新一覽

就在今天，React 團隊正式發布了 React 16。這次發布帶來了哪些內容呢？

全新的內部架構

• React 16 採用了稱為「Fiber」的全新的內部架構。官方對 Fiber 的一句話解釋是「React Fiber是對核心演算法的一次重新實現」。
• 以前的 React 使用的稱為「Stack」的更新方式下，一個調用鏈很長並且計算量很大的任務的調用棧會如下圖：

• 通過「Fiber」，React 使得大量的計算可以被拆解分片，非同步化。每執行完一段更新過程，就把控制權交還給React負責任務協調的模塊，看看有沒有其他緊急任務要做。從而保證了渲染的幀率，提高應用響應性。下圖中每一個波谷代表深入某個分片的執行過程，每個波峰就是一個分片執行結束交還控制權的時機：

• 在今年早些的 React Conf 上，React 開發者介紹了 Fiber 的工作原理和實際效果。在演示 Demo 中，一個非常深的組件樹在使用 Fiber 前後的渲染幀率有了非常大的提升（視頻 3:30 左右）。

新增了一個頂級 API: ReactDOM.createPortal

• Portal 本身不是新的概念，在以往使用 React 實現模態框等組件時我們也會用到，現在 React 官方提供了 API 使得能夠更方便地實現這樣的功能。
• 在一般的 React 結構中，組件的嵌套關係和渲染出來的 DOM 的嵌套關係是一致的（子組件渲染出的 DOM 一定是在父組件渲染出的 DOM 的內部的）。
• 但某些情況下，這樣的限制會導致問題，例如實現一個模態框（Modal），雖然模態框所在的組件在它的父組件內部，但是通常需要被渲染在 body 元素下。 新的 API 使用方式如下：

render() { // React 會在你提供的 domNode 下渲染，而不是在當前組件所在的 DOM return ReactDOM.createPortal( this.props.children, domNode, );}

• 更多信息可以查看 Portals。

render 方法能夠返回數組了

• 在以前，一個組件的 render 方法中如果要返回多個 element，必須使用一個元素將它們包裹起來。這樣可能會導致很多不必要的嵌套。
• 現在你可以這樣寫了：

render() { // 不需要再包裹一層了！ return [ // 但是要使用 key <li key="A">First item</li>, <li key="B">Second item</li>, <li key="C">Third item</li>, ];}

• 還支持了只返回一個字元串：

render() { return Look ma, no spans!;}

更好的錯誤處理

• 在以前，如果 React 在運行時遇到錯誤會導致應用崩潰（和一般的 JavaScript 運行時錯誤一樣，之後的代碼不會執行了）。
• 現在 React 給組件增加了 componentDidCatch(error, info) 的生命周期函數，你可以定義組件的錯誤處理函數，這樣組件在遇到運行時錯誤時會像增加了 try...catch 一樣，不會將錯誤直接拋出了，錯誤被局部組件 catch 住，保證了整個應用的可用性。
• 同時，React 還提供了更友好的錯誤提示，幫助開發者更好地發現問題。
• 詳細可以查看 Error Handling in React 16。

更小的體積

• React 16 下， react + react-dom 在 gizp 後的總體積為 109KB，比之前版本的 161.7KB 減小了 30%。

部分非核心模塊被移出

• React.createClass、React.PropTypes 等模塊被移出了 react 包，現在你必須從單獨的包里引入。

基於 MIT 協議

• 現在 React 15.6.2 和 React 16 都是基於 MIT 協議了，你可以自由選擇。

完整更新日誌請查看 React v16.0。

推薦閱讀：