成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React 16 升級總結(jié)

jubincn / 2844人閱讀

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

歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：

一、前言

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

二、升級的好處

這次升級的目標(biāo)是將 React 從版本 15.6.2 升級到 16.2.0。原因是 16.2.0 為止引入了幾個不錯的新特性，同時對現(xiàn)有代碼的影響會相對較小，風(fēng)險可控。比較吸引我的三個新特性如下：

文件大小減少30%。官網(wǎng)原文如下：

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

Error Boundaries，可以將錯誤限制在可控范圍，出錯時組件可以展示應(yīng)對錯誤的 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
這種寫法已經(jīng)不支持了，要改成：

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

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

function newInstance(props) {
  ...

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

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

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

四、總結(jié)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100466.html

相關(guān)文章

  • React-生命周期雜記

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

    KoreyLee 評論0 收藏0

  • react + koa2實現(xiàn)的論壇

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

    jk_v1 評論0 收藏0

  • 前端每周清單年度總結(jié)與盤點

    摘要：前端每周清單年度總結(jié)與盤點在過去的八個月中，我?guī)缀踔蛔隽藘杉?，工作與整理前端每周清單。本文末尾我會附上清單線索來源與目前共期清單的地址，感謝每一位閱讀鼓勵過的朋友，希望你們能夠繼續(xù)支持未來的每周清單。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清單年度總結(jié)與盤點 在過去的八個月中，我?guī)缀踔蛔隽?..

    jackwang 評論0 收藏0

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

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

    CoderStudy 評論0 收藏0

發(fā)表評論

0條評論

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