導航:首頁 > 版本升級 > 查看當前react版本

查看當前react版本

發布時間:2024-08-07 07:18:24

A. create-react-app4和5的區別

create-react-app是一種快速構建React應用程序工具,可以自動生成開發環境和配置文件。create-react-app的版本從4.0開始,到目前的5.2。

create-react-app 4.0和5.0之間的主要區別如下:

支持的React版本不同:create-react-app 4.0支持React 16.9及以下版本,而create-react-app 5.0支持React 17及以上版本。

新增的腳本命令:create-react-app 5.0新增了一些腳本命令,如npm start --inspect-brk,用於調試應用程序。

默認使用Webpack 5:create-react-app 5.0默認使用Webpack 5,而create-react-app 4.0使用的是Webpack 4。

B. React新舊版本對比總結歸納(生命周期篇)

我們先來看下React16.0前後生命周期變化的圖片

生命周期圖譜: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

① componentWillMount

② componentWillReceiveProps

③ componentWillUpdate

① UNSAFE_componentWillMount

② UNSAFE_componentWillReceivePorps

③ UNSAFE_componentWillUpdate

① getDerivedStateFromProps

② getSnapShotBeforeUpdate

③ getDerivedStateFromError

④ componentDidCatch

○ 什麼時候調用?

這個方法會在調用 render 方法之前調用,並且在初始掛載及後續更新時都會被調用。它應返回一個對象來更新 state,如果返回 null 則不更新任何內容。

○ 返回值

返回值是必須的,它應該是一個對象,用於更新state; 如果返回值為null,state不更新。

○ 主要用途?

這個生命周期函數是為了替代componentWillReceiveProps存在的,所以在你需要使用componentWillReceiveProps的時候,就可以考慮使用getDerivedStateFromProps來進行替代。主要是將新的props更新到state上

看下邊例子就明白了!

○ 什麼時候調用?

getSnapshotBeforeUpdate() 在最近一次渲染輸出(提交到 DOM 節點)之前調用。

○ 返回值

應返回 snapshot 的值(或 null)

○ 有什麼用途?

它使得組件能在發生更改之前從 DOM 中捕獲一些信息(例如,滾動位置)。此生命周期的任何返回值將作為參數傳遞給 componentDidUpdate()。

此用法並不常見,但它可能出現在 UI 處理中,如需要以特殊方式處理滾動位置的聊天線程等。

○ 什麼時候調用?

此生命周期會在渲染階段後代組件拋出錯誤後被調用,因此不允許出現副作用。

○ 返回值

它將拋出的錯誤作為參數,並返回一個值以更新 state

○ 有什麼用途?

主要用於封裝錯誤邊界用,收集錯誤信息並做對應處理。

以下為具體用法用例

然後你可以將它作為一個常規組件去使用:

○ 什麼時候調用?

此生命周期會在「提交」階段後代組件拋出錯誤後被調用,因此允許執行副作用。

○ 參數

error —— 拋出的錯誤。

info —— 帶有 componentStack key 的對象,其中包含有關組件引發錯誤的棧信息。

○ 返回值

它將拋出的錯誤作為參數,並返回一個值以更新 state

○ 有什麼用途?

主要用於封裝錯誤邊界用,收集錯誤信息並做對應處理。

用例如下:

結論:對於新生命周期③和④作用基本是一致的,都是用於封裝錯誤邊界,收集邊界下後代組件構造函數中發生的錯誤信息並作出對應處理。不同的是調用時間和返回參數。

C. 關於React升級版本後造成白屏

react從16升級到17版本後,npm run start 本地跑的時候散喚跡沒有問題,但是一旦build部署上去,就會白屏,然後出現這個報錯

點開一看,卡在沖並這里

查閱後得知,react從16升級到17後,相鏈埋應的react-dom也要升級到17,
輸入 npm i react-dom@17 --save 已解決

D. 如何管理React-Native庫的版本

首先安裝了nodejs 4.乏訂催寡詘干挫吮旦經1 版本
然後 安裝了 npm install -g react-native-cli 模塊
安裝 android sdk 並且配置android 環境變數
安裝gradle 環境
進入 這個博客 里邊有 react-native for android 項目,下載下來,然後執行 npm install 先安裝 react 依賴模塊包
打開兩個 命令窗口 1. 一個 執行react-native start ,另一個執行react-native run-android 就可以了

E. 怎麼看react build是什麼版本

安裝node.js 由於nodejs中使用GYP進行項目構建管理,而GYP是基於Python的構建工具。因此,需要先安裝Python。此外,在Windows系統下,nodejs採用GYP來生成Visual Studio Solution文件後,需要通過C++的編譯器將其編譯為二進制文件。因此,又需要先安裝C++編譯環境。最後,安裝nodejs【牆裂建議選擇stable穩定版】。一系列安裝完成後,進入cmd,輸入"npm"指令後回車,出現形同以下畫面內容,則安裝成功。 需要配置path,加入如:E:\Android\Python27;C:\Users\che\AppData\Roaming\npm;

F. react native gradle怎麼升級

更新版本的React Native將會讓你訪問更多的APIs, 這樣我們可以去使用更多的APIs,視圖Views,以及開發者工具以及其他一些好用的東西。瀏覽版本更新日誌就會發現整體FB官方開發進度還是非常緊張的,這樣就很容易導致舊版本會出現不能用的情況,後期可能會出現不可預料的情況,這邊建議大家盡量更新最新正式版本。
我們大家都知道一個React Native項目使用Android項目,iOS項目和JavaScript項目三部分進行組成的,而且三者都關聯打包在npm包內的,所以該項目版本進行更新是比較繁瑣的。下面我來給大家講解一下React Native項目的升級步驟。
一、查看當前版本
[plain] view plain
<span style="font-family:SimSun;font-size:14px;">pengchengxiang@ubuntu:~/AwesomeProject$ react-native --version
react-native-cli: 0.2.0
react-native: 0.22.2</span>
二、查看最新的版本
[plain] view plain
<span style="font-family:SimSun;font-size:14px;">pengchengxiang@ubuntu:~/AwesomeProject$ npm info react-native
{ name: 'react-native',
'dist-tags': { latest: '0.25.1', next: '0.26.0-rc' },
versions:
[ '0.0.0',
'0.0.5',
... ...
'0.24.1',
'0.25.0-rc',
'0.25.1',
'0.26.0-rc' ],
maintainers:
... ...
dist:
{ shasum: '',
tarball: 'https://registry.npmjs.org/react-native/-/react-native-0.25.1.tgz' },
directories: {} }</span>
三、升級依賴的版本
[plain] view plain
<span style="font-family:SimSun;font-size:14px;">pengchengxiang@ubuntu:~/AwesomeProject$ npm install --save [email protected]

> [email protected] install /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil
> node-gyp rebuild

make: Entering directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil/build'
CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
SOLINK_MODULE(target) Release/obj.target/bufferutil.node
COPY Release/bufferutil.node
make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/bufferutil/build'

> [email protected] install /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate
> node-gyp rebuild

make: Entering directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate/build'
CXX(target) Release/obj.target/validation/src/validation.o
SOLINK_MODULE(target) Release/obj.target/validation.node
COPY Release/validation.node
make: Leaving directory `/home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/ws/node_moles/utf-8-validate/build'

> [email protected] postinstall /home/pengchengxiang/AwesomeProject/node_moles/react-native/node_moles/yeoman-generator/node_moles/cross-spawn/node_moles/spawn-sync
> node postinstall

npm WARN optional dep failed, continuing [email protected]
[email protected] node_moles/react-native
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── word[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])</span>

閱讀全文

與查看當前react版本相關的資料

熱點內容
文件合同列印格式怎麼調 瀏覽:77
win10文件共享提示伺服器沒有響應 瀏覽:788
倒t型電阻網路相對穩定度怎麼算 瀏覽:367
怎麼樣編程彈窗 瀏覽:730
咨詢投標文件內容包含 瀏覽:248
win7win10c盤空間越來越小 瀏覽:806
悠途出行app在哪裡選座 瀏覽:67
突襲2哪個版本好玩 瀏覽:549
網站怎麼申請認證 瀏覽:676
簡訊apk是什麼文件 瀏覽:940
app官方下載在哪裡 瀏覽:511
iphone5s改名字 瀏覽:772
win10文件夾打開一直閃跳 瀏覽:208
win10攝像頭不能拍照 瀏覽:56
雲陽數控編程培訓哪裡學 瀏覽:519
文件的存放路徑怎麼改 瀏覽:583
cad字體文件如何導出 瀏覽:236
cs16需要cdkey哪個文件里 瀏覽:817
如何讓另一個表格的數據關聯 瀏覽:368
來自app的快捷指令是怎麼有的 瀏覽:844

友情鏈接