【React】版本差异概述【Material-UI】

2 年 ago

新, 韵

1 minute

版本差异总结

在使用React + Material-UI创建项目时，由于不同版本可能会出现一些问题，所以请注意参考此文章时要注意创建日期。

· React （用于构建用户界面的JavaScript库）
· create-react-app （用于快速创建React项目的脚手架工具）
· Material-UI （一种基于React的UI组件库）
· ReactRouter （用于在React应用中实现路由功能的库）

首先是关于React核心版本的问题。
如之后所述，由于React的版本限制了所支持的库版本，
所以更多时候我们会根据想要使用的库版本选择React本身的版本。

这里是发布说明。

我认为，根据React的不同版本，最主要的差异是在index.tsx等文件中编写render语句的方式。

请阅读这篇文章，链接在这里。

只需一种选择：
create-react-app命令也有版本。
根据使用哪个版本的命令，使用的React库本体版本也会发生变化。
以下是create-react-app版本5.0.0的发布说明。

另外，如果使用v5，React的版本将变为React18，因此不能使用Material-UI v4。如果使用v5，就可以了。本文章还总结了Material-UI的版本。

如果想要更改React的版本，可以有两种方法：
1️⃣ 更改create-react-app命令的版本。
2️⃣ 编辑所创建的package.json中的React库版本，然后使用npm install安装任意版本的React。

然而，目前（2023/05/01）似乎无法实现1️⃣。
在下面的文章中详细说明了，似乎是因为create-react-app命令只允许使用最新版本，以及无法通过npx命令的缺陷来实现缓存清除等措施的原因。

因此，我也尝试了一下，但似乎不可能，所以我选择第二个选项。
下面有详细的总结，但只需要执行create-react-app最新版本，然后编辑package.json并运行npm install就可以了。

在 v4 和 v5 之间存在一个重大的鸿沟。
这里贴上要求整理得很好的文章链接。官方文章在这里。

v4 变体：

第五版

另外，从v5开始，品牌名称由Material-UI改为MUI。因此，在本文章的标签中，我也同时加上了这两个标签，并且最重要的是，npm安装的内容也发生了变化，源代码中的import语句也会发生改变。

npm install @material-ui/core @material-ui/icons

npm install @mui/lab @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

我参考了公式的《入门指南》。

如果你想要做SPA，你可以使用它，不是吗？

npm install react-router-dom

在ReactRouter的v5和v6之间存在障碍。

嗯，既然只是写法稍有变化，看起来应该没有太大问题。

我已经查看了以下内容，但由于版本差异不会导致困扰，所以省略掉。
顺便整理了一些教程类的文章，请查看。
axios
react-cookie
date-fns
i18next

报导

react-cookie 反应饼干

日期-函数

i18next (Internationalization for JavaScript)