React v16升級小記

大隻魚00發表於2018-04-17
React

What's new in React16

  • Error Boundaries
  • Fragments ／ Strings
  • Portals
  • ReactDOMServer
  • DOM Attributes
  • Fiber

What's new in React16.2.0

  • Better support of Fragments

What's new in React16.3.0

  • New Context API
  • New life-cycle methods: getDerivedStateFromProps, UNSAFE(componentWillMount, componentWillReceiveProps, componentWillUpdate)
  • StrictMode
  • unstable_AsyncMode

升級

React16.3內容的變化相對較大，特別是Context即將面臨調整和新的元件生命週期函式將對整體架構和周邊生態產生較大影響，因此還是選用相比React16版本變化較小的React16.2作為升級版本

React外掛

React16將停止對React Addons的維護和支援，具體可以參照discontinuing support for react addons

注意的問題
  • React16依賴於es6的Map和Set，引入bable-polyfill或抽離單獨的pollyfill（注意需要先於react進行載入）
  • 不再支援ES5建立元件寫法，引入create-react-class可以進行相容，建議全面擁抱ES6
  • React.PropTypes廢棄
import React, {PropTypes} from 'react';
//React16之後
import React from 'react';
import PropTypes from 'prop-types';
複製程式碼
  • ReactDOM.render() 和 React.unstable_renderSubtreeIntoContainer() 這兩個方法在生命週期方法中執行是將會返回null，要解決這個問題，可以藉助protals或refs
  • componentDidUpdate宣告週期方法不再接受prevContext引數
  • 其他細節

setState 的回撥（第二個引數）現在會在 componentDidMount/componentDidUpdate之後立即啟動，而不是在所有元件都渲染完成之後 元件例項化後的type屬性將不再指向元件

//item為Node元件的例項
item.type === Node //true
//React16之後
item.type === Node //false
複製程式碼

相關生態更新

  • react-hot-loader 4.0.0
//react-hot-loader的實現將更貼近函式式
import { hot } from 'react-hot-loader';
const App = () => <MainEntry />;
export default hot(module)(App);
複製程式碼

解決之前版本SFC函式無法熱更新的問題

總結

相對來說從React15.x升級到React16.2並沒有太大的挑戰，而在React16.3之後的版本將迎來更多變化，以及周圍生態的更新，包括新生命週期函式及New Context API，每一個的變化都不可掉以輕心。

相關文章