React 16 升級總結

歡迎關注個人公衆號睿Talk，獲取我最新的文章：

1、前言

目前 React 最新的版本是 16.7.0，基於全新的 React Fiber 架構，有衆多激動人心的新功能。因爲是大版本升級，考慮到業務的穩定性，咱們團隊大概等了一年的時間，終於鼓起勇氣着手升級的事情，特以此文來記錄升級過程當中遇到的坑。

2、升級的好處

此次升級的目標是將 React 從版本 15.6.2 升級到 16.2.0。緣由是 16.2.0 爲止引入了幾個不錯的新特性，同時對現有代碼的影響會相對較小，風險可控。比較吸引個人三個新特性以下：

• 文件大小減小30%。官網原文以下：

react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).

• Error Boundaries，能夠將錯誤限制在可控範圍，出錯時組件能夠展現應對錯誤的 UI。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

• Fragments，能夠在 render 返回多個一級組件，而不須要在外面包一個div

const Fragment = React.Fragment;

<Fragment>
  <ChildA />
  <ChildB />
  <ChildC />
</Fragment>

3、升級遇到的問題

一、依賴
項目中用到了 React Router 3 和 Redux。原計劃將 Router 升級到 v4，但改動實在太大，放棄了，只是升級到支持 16 的版本。其它升級的依賴以下：

二、React.PropTypes
這種寫法已經不支持了，要改爲：

// import { PropTypes } from 'React' 已廢棄
import PropTypes from 'prop-types';

三、ReactDOM.render
在生命週期函數裏面，ReactDOM.render會返回null,所以相似下面這樣的代碼就會報錯

function newInstance(props) {
  ...

  let loading = ReactDOM.render(<Loading {...props} />, div);
  return {
    show: loading.show,  // Error, loading 爲 null
    container: div,
  };
}

四、setState(null) 不觸發 render
若是須要強制刷新的話，可使用this.forceUpdate()

上述的問題主要是 16.0.0 帶來的問題，更詳盡的升級指南能夠看這裏的。

4、總結

整體來講，升級沒有遇到特別大的困難，主要就是針對官方文檔的Breaking changes部分，進行全局搜索，而後進行修改。另外，還有可能依賴的庫用到了已經不支持的 API，例如PropTypes，應對辦法就是升級對應的庫。

先聊到這裏，有其它疑問，歡迎留言交流。