成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React 16 升級(jí)總結(jié)

jubincn / 2750人閱讀

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

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

一、前言

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

二、升級(jí)的好處

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

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

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

Error Boundaries，可以將錯(cuò)誤限制在可控范圍，出錯(cuò)時(shí)組件可以展示應(yīng)對(duì)錯(cuò)誤的 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 返回多個(gè)一級(jí)組件，而不需要在外面包一個(gè)div 

const Fragment = React.Fragment;
三、升級(jí)遇到的問題

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

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

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

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

function newInstance(props) {
  ...

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

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

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

四、總結(jié)

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100466.html

相關(guān)文章

  • React-生命周期雜記

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

    KoreyLee 評(píng)論0 收藏0

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

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

    jk_v1 評(píng)論0 收藏0

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

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

    jackwang 評(píng)論0 收藏0

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

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

    CoderStudy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<