React v16.0正式版釋出

繆宇發表於2019-03-04
React

原文：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

完

相關文章