react 升级

1、查看react版本

当前开发项目的react版本从哪里看呢?其实就在package.json文件中,搜索"react",即可看到版本号

2、输入命令npm info react查看最新的react版本

3、执行命令

  1. npm install --save react@18.2.0 react-dom@18.2.0

4、错误Module not found: Error: Can't resolve 'axios'

5、执行安装npm install --save axios

NPM命令报错

解决方案卸载重新安装

nvm uninstall 14.16.1

以管理员身份卸载原node重新安装

Npm -v

6、查看react-redux版本

命令npm info react-redux、最新版 react-redux@8.0.5

安装命令 npm install --save react-redux@8.0.5

7、查看最新版本npm info react-router-dom

最新版是react-router-dom@6.8.2

安装命令 npm install --save react-router-dom@6.8.2

升级完成出现错误

V6修改点过多选则降级到v5

命令 npm install --save react-router-dom@5.2.1

8、查看最新版npm info react-router

最新版本react-router@6.8.2

安装命令 npm install --save react-router@6.8.2

9查看最新版 npm info redux

最新版redux@4.2.1

安装命令 npm install --save redux@4.2.1

10 查看npm info babel

显示最新版本号babel@6.23.0

令安装命令 npm install --save babel@6.23.0

11、查看信息npm info babel-cli

最新版本号:babel-cli@6.26.0

11、升级替换componentWillReceiveProps方法报错,所以升级对应依赖包

解决方案componentWillReceiveProps代替方案 - 漫思 - 博客园 (cnblogs.com)

修改成

static getDerivedStateFromProps(nextProps,prevState){}修改每个赋予初始值处

12、页面不停执行生命周期函数如何修改

调查原因是再返回值相同也认为有pros数据变化,受副作用影响所以进入setstade

解决方案使用其他生命周期函数替换触发条件

GitHub - reactjs/react-codemod: React codemod scripts

13、数据问提导致错误

14、升级react18后建议使用新的API用法警告

解决方案根据官方API处理方式调整先获取节点再进行渲染

红色警告解决方案root不放在body上会影响其他第三方组件发风险。

15、红色错误警告需要调查

相关推荐
●VON22 分钟前
React Native for OpenHarmony:2048 小游戏的开发与跨平台适配实践
javascript·学习·react native·react.js·von
木斯佳40 分钟前
前端八股文面经大全:26届秋招滴滴校招前端一面面经-事件循环题解析
前端·状态模式
光影少年1 小时前
react状态管理都有哪些及优缺点和应用场景
前端·react.js·前端框架
saber_andlibert2 小时前
TCMalloc底层实现
java·前端·网络
逍遥德2 小时前
如何学编程之01.理论篇.如何通过阅读代码来提高自己的编程能力?
前端·后端·程序人生·重构·软件构建·代码规范
冻感糕人~3 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions3 小时前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子3 小时前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘3 小时前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录3 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试