国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React 16 升級總結

jubincn / 2745人閱讀

摘要：二升級的好處這次升級的目標是將從版本升級到。，可以在返回多個一級組件，而不需要在外面包一個三升級遇到的問題依賴項目中用到了和。另外，還有可能依賴的庫用到了已經不支持的，例如，應對辦法就是升級對應的庫。

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

一、前言

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

二、升級的好處

這次升級的目標是將 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 
Something went wrong.
;
    }
    return this.props.children;
  }
}

Fragments，可以在 render 返回多個一級組件，而不需要在外面包一個div 

const Fragment = React.Fragment;
三、升級遇到的問題

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

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

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

3、ReactDOM.render
在生命周期函數里面，ReactDOM.render會返回null,因此類似下面這樣的代碼就會報錯

function newInstance(props) {
  ...

  let loading = ReactDOM.render(, div);
  return {
    show: loading.show,  // Error, loading 為 null
    container: div,
  };
}

4、setState(null) 不觸發 render
如果需要強制刷新的話，可以使用this.forceUpdate()

上述的問題主要是 16.0.0 帶來的問題，更詳盡的升級指南可以看這里的。

四、總結

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100466.html

相關文章

  • React-生命周期雜記

    摘要：前言自從發布之后，更新速度日新月異，而生命周期也隨之改變，雖然原有的一些生命周期函數面臨廢棄，但理解其背后更新的機制也是一種學習在這里根據官方文檔以及社區上其他優秀的文章進行一個對于生命周期的總結，大致上分為以下三個模塊新老生命周期的區別為 前言 自從React發布Fiber之后，更新速度日新月異，而生命周期也隨之改變，雖然原有的一些生命周期函數面臨廢棄，但理解其背后更新的機制也是一種...

    KoreyLee 評論0 收藏0

  • react + koa2實現的論壇

    摘要：頁面預覽頁面主要分為話題列表頁消息頁面個人信息頁面創建話題頁面個人設置頁面注冊頁面登陸頁面頁面。還有權限方面的，比如登陸后不可以再進入登陸頁面，未登陸也不可以進入創建主題頁面。沒有使用，但推介使用，不然性能不好。 技術棧 線上地址：點擊查看 （訪問會有點慢，至于原因，下面會說明）前端（主要）：reactv15.6.1、react routerv4.2.0、reduxv3.7.2、ant...

    jk_v1 評論0 收藏0

  • 前端每周清單年度總結與盤點

    摘要：前端每周清單年度總結與盤點在過去的八個月中，我幾乎只做了兩件事，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結與盤點 在過去的八個月中，我幾乎只做了...

    jackwang 評論0 收藏0

  • 前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

    摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

    CoderStudy 評論0 收藏0

發表評論

0條評論

jubincn

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<