前端框架react（前端框架vue）

本篇文章给大家谈谈前端框架react，以及前端框架vue对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、React作为时下最热的前端框架，各位有什么经验分享下吗
• 2、开箱即用的React前端框架——ReactAdmin
• 3、前端框架React、Vue对比
• 4、web前端三大主流框架
• 5、2021年的前端框架选择 Angular vs React vs Vue
• 6、从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架

React作为时下最热的前端框架，各位有什么经验分享下吗

1. 不要陷入纠哪岩结工具的怪圈

我们团队一开始用 React 的时候，工具栈应该是 grunt +

grunt-react；写了一段时间感觉有局限，然后老大带头把工具换成了 gulp + browserify + watchify +

reactify，然后又愉快的写了大概半年吧，发现流行的库都上 webpack 了；于是我们的工具栈又变成了 gulp + webpack +

babel-loader。最后大家一致认为 gulp 是多余的，所以我们的工具栈又围绕 webpack

重新搭建了一遍。到最近我负责的一个内部项目，什么 hot-module-replacement、extract-text-plugin（让你在

js 里 require('style.scss'); 这么写的玩意儿）一股脑的造。当然再后来因为业务需要我们又基于 webpack

搭建了自己的构建工具，这是后话……

这将近一年半的折腾历史告诉大家，1) 前端就是个大坑，1个月不学新知识你就会被社区遗忘 2) 现在上 React 真幸福，工具栈基本都稳定了（什么？你还不懂？用 webpack！），不用花太多时间纠结。槐游

PS. HMR 也就那样，虽然 dan 吹得神乎其神，但实际在项目里我发现大家还是习惯手动 Cmd + R

，因为项目大了以后 rebuild 也需要 1、2 秒。

2. DOM 操作是不可避免的

但

凡是上点儿规模的前端项目，没有 DOM 操作基本是不可能的。且不说最常见的后端「埋点」，你总得用 DOM API

去取值吧；就说一个最简单的，比如右手边这个「回到顶部」的按钮，你纯用 React 写一个试试。当然你会说什么

requestAnimationFrame，什么 ReactCSSTransitionGroup blah blah

blah，真正到项目里你会发现还是 DOM API 简单。

3. 拥抱 ES 6，拥抱 React v0.14

这俩为什么放在一起说呢？因为 React v0.14 里提出了一个全新的组件概念叫做：无状态的函数式组件（Stateless functional components）。它大概长这样：

var Aquarium = ({species}) = (

Tank

{getFish(species)}

/Tank

);

有没有发现被传统的 createClass 方法精简了很多？当然这样写组件也有很多局限，比如不能声明各种生命周期方法等等，铅缓销但是在常见的前端业务场景中，纯 render 的组件不在少数。在这样的语法推出后，我们就能把这些组件更方便的抽出来复用了。

此外，拥抱 ES 6 还有很多的好处，比如在加载依赖的时候不用先 var xxx = require('xxx'); 再 var yyy = xxx.yyy; 而是可以直接 import {yyy} from 'xxx'; 简洁明了。

4. 生态环境仍然在成长中，坑不少

其

中首先要口诛笔伐一下的就是 react-router，我们从 v0.10 开始用，到现在

v1.0。你知道为了升级这玩意儿我们改了多少次业务代码么？每次升级 API 都要变，无力吐槽。当年好不容易搞懂了

v0.11，在博客里写了篇技术文章分享，结果后面的日子就是各种被催更……一个月前抽空就 0.13 版又重写了一遍教程，这不 1.0

版又出了，API 基本全都不一样了！！不一样了！！一样了！！样了！

当然除了坑也有不少高质量的生态环境产品，比如蚂蚁的 ant design。

5. Server 端渲染很美，至今没看见哪个规模级的产品用到

可能是我孤陋寡闻吧，欢迎评论中跟进。自己摸索着写过一个最简单的 server 端渲染，但是这套逻辑如果套到我们现在的业务逻辑中，几乎可以直接枪毙。为了实现 server 端渲染需要做出的 trade off 太多。

6. React 很简单，也很难

简单是因为 React 的 API 真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看 Angular……）。但是当你以为你真的搞懂 React 的时候，看看React 源码剖析系列 － 解密 setState - pure render - 知乎专栏这篇文章开头提的问题，有多少人能不假思索的答对呢？（顺便安利一下，我们团队的知乎专栏，目前处于死磕 React 的状态）

当你真正在业务项目中使用 React 的时候，你会发现它的生命周期比你想象的复杂；它的 API 背后的逻辑比你以为的麻烦。当然，首先你要踩进这个坑。

7. 对于楼上某位仁兄表示《React：引领未来的用户界面开发框架》这本书太难的回答，作为译者之一表示对不起你。作为补偿，所有购买本书的同学均可凭拍照私信我咨询 React 相关的问题。

开箱即用的React前端框架——ReactAdmin

ReactAdmin是一个Github上免费开源的前端框架（不是组陵槐件库，也不是模板，它是一个框架），采用es6、React和Material Design构建基于Rest/GraphQl API的Web应用程序。在React上star数超过8k。

ReactAdmin不是个哗孝UI组件库，它是一个前端框架，因此你基本上基本上只要按照官网的文档进行一些配置等然后在其基础上开发自己的应用程序即可，可谓开箱即用，意识就是都给你集成好了乱汪稿。

你可以直接使用以下命令进行安装（这是安装react-admin及所有的依赖）

下面我们看一下官网提供的一个最简单的示例，你可以在它的主仓库中获取

我们进入到simple中，大致看一下代码和目录结构

我们安装一些依赖然后启动

成功后打开浏览器，这是使用react-admin最简单的一个例子

一图了解

由于ReactAdmin是一个非常复杂的框架，你可以参考提供的文档，我这里就不详细介绍了，感兴趣的可以直接看文档，文档是英文的，所有的说明都在文档中。

ReactAdmin它是一个集合，它将一些前端开发所需要的东西都集成了进来，然后做好，我们直接使用即可，不仅仅适合个人学习，也适合通过它来构建企业级的应用。我们不仅仅是拿过来直接用，我们可看一看别人是怎么实现这样的一个框架的，从源码去学习会更快的提升自己的水平，希望对你有所帮助！

前端框架React、Vue对比

公司做前后端分离，确定前端技术栈，对前端框架React、Vue，稍微做了下分析：

对比：

1、上手速度（vue：api简单，语法简单，学习成本低）

2、组件化能力（都具备）

3、渲染速度 （vue更快）

vue更快，跟踪组件状态

react自己管理状态变化

4、迁移到移动端的能力（React胜）

React 提供无缝迁移散衫启到移动端的能力，React Native（事实证明这个需要时间学习成本）。

Vue目前有weex，但是大的使用案例，都是在阿里内部,外部还没有使用塌明案例

5、适用项目大小

vue适合小项目，React适合大项目

6、目前使冲如用情况（React胜）

Vue最火（关注度高，使用者多，门槛低）

React使用较多

7、后期开发维护迭代（React胜，但Vue 国内用的小伙伴比较多，群多）

React公司FaceBook，团队强大

Vue开源技术团队

8、支持的ui库，论坛、技术坑

ui库目前都比较多，有element ui、view ui 、antd（现在也支持vue了）

React 有比较好的antd 、element react

总结：如果不考虑后期迁移移动端，和不担心技术支持的迭代中断（这个担心比较小），想要入门快，推荐用vue,

如果 考虑后期迁移移动端，和技术后期官方支持，推荐React,介于公司对于组件化要求高，选择了React

web前端三大主流框架

Web前侍则端三大框架：Vue.js、React.js、Angular.js。

1、Vue.js

Vuejs的受欢迎度目前是最高的，而开发vuejs的就是一个中国人名字叫尤雨溪。Vue可以通过简洁的 API 提供高效的数据绑定和灵活的组件系统。同时，尤雨溪选择了开源的方式，方便更多的开发者使用并参与其中。

Vue 也使用虚拟 DOM，因此在项目中的更改不会正式对 DOM 产生镇吵影响。Vue 在这三者中，大小最小（大约 80KB），这大大提高了它的性能。

2、React.js

React框架是起源于Facebook的项目，主要是通过对DOM的模拟减少与DOM的交互做到的。React的模块化把组件进行了隔离，出现问题的时候更方便程序员对其进行修改。

3、Angular.js

Angular拥有很好的应用程序御谈侍，是一个以JavaSpript编写的库，模板功能也异常强大，本身就带有丰富的Angular指令。一方面可以通过指令扩宽HTML，一方面可以通过表达式绑定数据到HTML。

[img]

2021年的前端框架选择 Angular vs React vs Vue

每个前端开发人员都听说过三个用于构建 Web 应用程序的框架：React、Vue.js和Angular。

React 是一个 UI 库，Angular 是一个成熟的前端框架，而 Vue.js 是一个渐进式框架。

它们几乎可以互换使用来构建前端应用程序，但它们并非 100% 相同，因此比较它们并了解它们的差异是有意义的。

每个框架都是基于组件的，并允许快速创建 UI 功能。

然而，它们都有不同的结构和架构——所以首先，我们将研究它们的架构差异以了解它们背 后的哲学。

React 不强制执行特定的项目结构，正如您从下面的官方“Hello World”示例中看到的那样，您只需几行代码即可开始使用 React。

React 可以用作 UI 库来渲染元素，而无需强制执行特定的项目结构，这就是它不是严格意义上的框架的原因。

React Elements是 React 应用程序的桥仔最小构建块。它们比 DOM 元素更强大，因为 React DOM 确保在发生变化时有效地更新它们。

组件是更大的构建块，定义了在整个应用程序中使用的独立且可重用的部分。它们接受称为 props 的输入并生成元素，然滑枣后显示给用户。

React 基于 JavaScript，但它主要与JSX (JavaScript XML)结合，这是一种语法扩展，允许您创建同时包含 HTML 和 JavaScript 的元素。

您使用 JSX 创建的任何内容也可以使用 React JavaScript API 创建，但大多数开发人员更喜欢 JSX，因为它更直观。

Vue.js 核心库只关注视图层。之所以称为渐进式框架，是因为您可以使用官方和第三方包（例如Vue Router或Vuex ）扩展其功能，将其转变为实际框架。

虽然 Vue 与 MVVM（Model-View-ViewModel）模式没有严格关联，但它的设敏让汪计部分受到了它的启发。使用 Vue，您将主要在 ViewModel 层上工作，以确保以允许框架呈现最新视图的方式处理应用程序数据。

Vue 的模板语法让您可以创建 View 组件，并将熟悉的 HTML 与特殊指令和功能相结合。这种模板语法是首选，即使原始 JavaScript 和 JSX 也受支持。

Vue 中的组件很小，是自包含的，并且可以在整个应用程序中重复使用。带有扩展名的单文件组件(SFC).vue包含 HTML、CSS 和 JavaScript，因此所有相关代码都位于一个文件中。

SFC 是在 Vue.js 项目中组织代码的推荐方式，尤其是大型项目。需要使用 Webpack 或 Browserify 等工具将 SFC 转换为可用的 JavaScript 代码。

在本文中，我讨论的是 Angular 2，而不是现在称为 AngularJS 的框架的第一个版本。

AngularJS，原始框架，是一个MVC（模型-视图-控制器）框架。但是在Angular 2 中，与 MV*-patterns 没有严格的关联，因为它也是基于组件的。

Angular 中的项目被组织成模块、组件和服务。每个 Angular 应用程序至少有一个根组件和一个根模块。

Angular 中的每个组件都包含一个模板、一个定义应用程序逻辑的类和元数据（装饰器）。组件的元数据告诉 Angular 在哪里可以找到创建和呈现其视图所需的构建块。

Angular 模板是用 HTML 编写的，但也可以包含带有特殊指令的Angular 模板语法，以输出反应性数据和呈现多个元素等。

组件使用 Angular 中的服务来委托业务逻辑任务，例如获取数据或验证输入。它们是 Angular 应用程序的独特部分。虽然 Angular 不强制使用它们，但强烈建议将应用程序构建为一组可以重用的不同服务。

Angular 内置于 TypeScript 中，因此建议使用它以获得最无缝的体验，但也支持纯 JavaScript。

React 是最受欢迎的 JavaScript 项目之一，在 GitHub 上拥有 16 万颗星。它由 Facebook 开发和维护，并在他们的许多项目内部使用。此外，根据BuiltWith的使用统计数据，它为超过 200 万个网站提供支持。

在三个框架中，Vue在 GitHub上的 star 数最多，有 176k。该项目由前 Google 员工 Evan You 开发和领导。据BuiltWith 称，这是开源社区中一个非常强大的独立项目，被超过 100 万个网站使用。

Angular 是由 Google 开发的，但令人惊讶的是它并没有用于他们的一些旗舰产品，例如搜索或 Youtube。它经常用于企业项目，并基于BuiltWith的数据为超过 97,000 个网站提供支持。

它是三个框架中星数最少的，在 GitHub 上有 68k 星。然而，当从 Angular 1 切换到 Angular 2 时，他们创建了一个全新的代码库，而不是继续AngularJS项目，该项目也有 59k 星。

在开发应用程序时，开源包可以为您节省宝贵的时间。不仅如此，它们通常比定制组件和封装更好，因为它们经过了实战测试。

查看可帮助您更轻松地创建新功能的现成组件、主题和其他工具的可用性非常重要。

许多前端应用程序依赖全局状态管理来存储信息，例如谁登录和其他用户设置。

最流行的 JavaScript 状态管理项目是Redux。大多数开发人员使用Redux的官方 React 绑定，这些绑定由 Redux 团队维护。

由于 React 的流行，查找输入组件和现成的元素非常容易。它们都只是在 Google 或 GitHub 上搜索即可。

React 生态系统还包括React Native，它允许您从用 React 编写的单个代码库构建原生 iOS 和 Android 应用程序。因此，React 也可以成为使用 Web 技术构建移动应用程序的绝佳选择。

React 是 MERN 堆栈的一部分，其中包含 MongoDB、ExpressJS、React 和 NodeJS。这种组合的伟大之处在于，单一语言——JavaScript——为整个应用程序提供动力。

尽管 Redux 可以在 Vue 中使用，但没有官方绑定。但这不应该让您担心，因为Vuex是专门为 Vue 应用程序制作的官方状态管理库。除了与 Vue 很好地集成之外，使用 Vue 的开发人员工具进行调试也很容易。

在 Vue 的早期，很难找到现成的组件。随着社区的发展，您可以使用各种输入组件和高级元素来加快开发速度。

对于移动应用程序开发，有一个名为Weex 的新兴项目。Weex 由阿里巴巴开发和使用，但不如 React Native 成熟和强大。更重要的是，由于该项目在中国开发和使用较多，因此很难找到英文文档和解决问题的方法。

Vue 与 Laravel 集成得很好，这就是为什么它们经常一起使用。Laravel 提供完整的JavaScript 和 CSS 脚手架，以支持在新项目中使用 Vue。

对于 Angular 中的状态管理，您可以使用NgRx项目。它的灵感来自 Redux，但它是专门为 Angular 创建的。

与 Vue 和 React 的情况一样，您可以将许多现成的组件导入到您的项目中。与 Angular 略有不同的是，Angular Material项目中有许多官方组件。这是 Google 的一个官方项目，为 Angular 应用程序提供 Material Design 组件。

您可以使用NativeScript在 Angular 中构建跨平台移动应用程序。它也支持 Vue，但 Angular 支持更成熟。

Angular 是著名的 MEAN 堆栈的一部分，它将 Angular 与 MongoDB、ExpressJS 和 NodeJS 相结合。与 MERN 堆栈类似，它的前端和后端都完全依赖 JavaScript。

Angular、React 和 Vue 都可用于开发渐进式 Web 应用程序，也称为 PWA。

PWA 不是移动应用程序，而是 Web 应用程序，智能手机用户可以将其添加为主屏幕的快捷方式，并提供类似于原生移动应用程序的外观和感觉。

您还可以为每个框架找到高级模板和预制应用程序，但 Angular 和 React 比 Vue 提供更多高级选项。

在选择框架或库时，您还需要考虑性能。

在许多情况下，您不必担心性能，尤其是在构建小型项目时。然而，项目的范围和复杂性越大，性能就会（并且将会）成为一个问题。

重要的是要注意，在 Web 性能方面，开发质量和遵循最佳实践比框架的选择更重要。

但由于存在一些性能指标和差异，我将研究它们并解释每个指标如何影响您的开发工作。

JS 框架基准测试的结果表明，它们在大多数基准测试中都表现得相当好，例如在表中创建或附加行。

正如你在上面看到的，Vue 在选择行时比 Angular 和 React 慢得多。另一方面，Angular 和 React 在交换行方面效率不高。

这些是渲染基准中唯一的实质性差异 - 在大多数情况下，不会产生明显的结果。由于选择行是比交换行更常见的功能，我想说这个基准测试将 Vue 排在第三位，仅次于 Angular 和 React 并列第一。

在内存和启动时间方面，React 和 Vue 得分很好，但 Angular 稍慢。Angular 启动一个基本脚本可能需要 150 毫秒，并且需要更多内存才能运行。

谷歌 Chrome 实验室的Perf Track显示了来自数千个网站的生产数据。这些统计数据受许多其他因素的影响，而不仅仅是选择的框架，让我们看看数字。

与 Angular 相比，Vue 和 React 网站在这个指标上的排名更高，Angular 需要更多时间来启动并向用户呈现内容。

在渲染完整页面的三个框架中，Angular 也是最慢的，只有 27% 的 Angular 网站得分在可接受的范围内。

对于所有三个框架，超过 80% 的网站都在第一次输入延迟的可接受范围内，这显示了用户可以与页面交互所需的时间。

迄今为止，最轻量级的应用程序是使用 Vue 开发的应用程序，68% 的 Vue 应用程序加载的 JavaScript 不到 1MB。另一方面，Angular 和 React 应用程序往往具有更大的代码大小。

您可以从这些数字中看到趋势，但您不应该太快得出结论。例如，对于最后一张图，可以解释为 Vue 用于开发更轻量级的应用程序，而 Angular 用于更大的项目。

统计数据可以帮助指导您做出正确的决定，但您不能使用它们来证明一个框架比另一个更快或更好。

对于更高级的应用程序，使用的前端框架应该能够执行一些提高性能并且可以更好地扩展的任务。

两项关键技术是服务器端渲染 (SSR) 和虚拟化。

React 支持使用官方ReactDOMServer包进行服务器端渲染。对于虚拟化，您可以使用名为React Virtualized的流行第三方工具。

Vue 中也支持服务器端渲染以及官方的SSR 包。此外，您还可以使用基于 Vue 构建并支持 SSR的Nuxt.js框架。

不幸的是，Vue 中的虚拟化选项并不是那么强大。在我看来，Vue Virtual Scroll List是虚拟滚动的最佳解决方案，但它有点问题，不如 React 和 Angular 的选项稳定。

Angular 拥有SSR的官方Angular Universal包，以及用于虚拟滚动和高效渲染大型列表的官方组件。

学习这些框架有多容易？

要回答这个问题，我们需要查看每个框架的复杂性及其引入的概念。

在最基本的用例中，React 是三个框架中最不复杂的。那是因为你只需要导入库，然后你就可以用几行代码开始编写你的 React 应用程序。

但是除了 Hello World 示例之外，大多数 React 应用程序都是基于组件的，而不仅仅是在页面上呈现一些元素。

一些开发人员对 React 感到奇怪或困难的一件事是，学习 JSX 是一条单行道。您也可以使用原始 JavaScript，但由于大多数 React 开发人员使用 JSX，学习它几乎是不可避免的。

这是使 React 的学习曲线变得更陡峭的主要因素，但除此之外，对于了解 JavaScript 并理解 Web 开发概念的开发人员来说，它是一个易于学习的库。

Vue 的设置比 React 稍微复杂一些。你可以将它用作一个库来定义你可以在整个 HTML 中使用的组件——但与 React 类似，这不是大多数项目的构建方式。

大多数 Vue 项目都有一个命名的根组件App.vue和一些用于显示各种内容的子组件。

说到语法，你唯一需要学习的新东西就是 Vue 的模板语法，如果你了解 HTML，这很容易掌握。基本的指令，如v-if和v-for有条件的渲染和列表的渲染，很容易理解即使是初学者。

此外，Vue 的单文件组件将所有前端代码保存在一个地方，便于组织新项目。

在我看来，Vue 是最容易学习的，因为它的简单和直观的语法。

Angular 拥有三者中最复杂的项目结构，而且由于它是一个成熟的前端框架，因此它依赖的概念更多。

除了组件，Angular 还支持模块和服务。它希望您以特定的方式编写和设计代码库，从而使您的项目在扩展时更易于维护。

至于语法，由于 Angular 最适合与 TypeScript 配合使用，因此在构建 Angular 项目时了解 TypeScript 非常重要。

与 Vue 一样，您还必须熟悉类似 HTML 的语法，以便您可以开始使用 Angular 编写新的 UI 功能。

在我看来，Angular 对于普通开发者来说是最难学的，因为它更复杂并且依赖于 TypeScript。

许多开源项目和框架逐渐被遗忘并无人维护。您是否应该担心我们在这里讨论的任何框架？

尽管我们无法完全预测会发生什么，但正在进行的开发工作是这些项目 健康 状况的良好指标。人气和增长也是预测项目寿命的重要指标，所以让我们来看看每个框架。

React v17.0已经发布，但令人惊讶的是，它没有为开发人员提供任何新功能。

主要的变化是这个新版本可以更容易地升级 React 本身。您可以将 React 的某些部分从旧版本升级到新版本，而无需升级整个项目。

如果您的应用程序依赖于随新版本更改或弃用的功能，您可以保留旧版本以保持此功能有效。此更新使 React 成为一个很好的长期选择，因为它可以更轻松地与新版本保持同步。

React 的每周 npm 下载量自去年以来增长了 44% 。从绝对数量来看，它仍然是三个项目中下载量最大的。

Vue 3 已于2020 年 9 月发布，它解决了 Vue 2 在大型项目中存在的许多严重问题。它引入了受React Hooks启发的Composition API，可以更轻松地跨组件重用逻辑。

整个项目用 TypeScript 重写，提高了新 Vue 项目对 TypeScript 的支持，同时也使项目更易于维护。

Vue 3 是一个急需的升级，使 Vue 更适合大型项目。

Vue 的每周下载量自去年以来增长了 87%，使 Vue 成为相对而言增长最快的框架。如果 Vue 能够保持这种增长速度，那么它肯定会很快超过 Angular。

Angular 最近推出了Ivy 编译器。它减少了构建时间，优化了资产，允许更快的测试，并总体上改善了开发人员的体验。

Angular 团队每年发布两次重大更新，其中可能包含新功能，或者只是让框架跟上新浏览器版本的速度。

自去年以来，Angular 的每周下载量增长了约 50% ，因此它仍然是一个受欢迎的项目。

Angular、React 和 Vue 都处于非常活跃的开发阶段。他们定期发布新版本并维护现有版本。由于在每种情况下当前的支持水平都很高，因此您可以安全地使用这些框架中的任何一个。

需要注意的是，Angular 的增长没有以前那么快，而 Vue—— 尽管它是最近开始的——似乎增长了很多。

如前所述，我们无法预测哪些框架会长期保持相关性，但每个项目背后都有一个伟大的社区，并且在不断发展。

我这篇文章的目标是解释架构差异，分解每个框架的优点和缺点，并在适用的地方进行比较。

在进入一个新框架之前，有几件事情需要考虑。

首先，在选择新技术时，您团队的经验可能是一个决定性因素。

同样，您必须考虑您所在地区可用的人才，以便您可以为您的项目聘请开发人员。

最后，当涉及到项目本身时，复杂性和范围也会影响您对框架的选择。

通过考虑所有关键差异，我希望您可以决定哪个是最适合您的目标和需求的前端框架。

(本文由闻数起舞翻译自Aris Pattakos的文章《Angular vs React vs Vue 2021》，转载请注明出处，原文链接：)

从0搭建React+antd+TypeScript+Umi Hooks+Mobx前端框架

因为现在公司的主要技术栈是React,所以也想着能够誉蔽拦搭建一个好的React前端框架，方便在工作中使用；框架在打包过程也做了优化，多线程，拆包，缓存等等手段提升打包速度和质量。主要用到的库包括：

创建带TypeScript模板的react-app，庆胡推荐使用yarn,接下来我也主要以yarn做例子

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。antd按需加载以及自定义主题

重新打包就可以了， 所有的主题配置在这里噢

这里利用React-router做路由，同时也会根据用户角色，做权限处理；只有当角色和路由允许的角色一致时才可以访问和展示。

新建router下新建indext.tsx 用于渲染页面

引入Router/index.tsx

新建hasPermission.ts,如果页面 roles 包括用户的角色则返回true,在渲染menu和子页面的时候就根据这个值渲染页面。

比如Home页面，渲染子页面的逻辑：

在这里 SubPages1 下面的 page1 就无法展示出来和访问，如果直接输入路由也会访问页面不存在，因为page1允许的角色 user 而我们角色是 admin 所以无法展示。

useImmer 很好的解决了ReactHooks中的赋值的性能问题，可以单独更新某个对象的某个属性。

上面的赋值方法也可以写到一起,效果是一样的：

Umi Hooks 是一个 React Hooks 库，致力提供常用且高质量的 Hooks。提供了非常多的Hooks组件，比如上面使用的 usePersistFn ，他的作用：在某些场景中，你可能会需要用 useCallback 记住一个回调，但由于内部函数必须经常重新创建，记忆效果不是很好，导致子组件重复 render。对于超级复杂的子组件，重新渲染会对性能造成影响。通过 usePersistFn ，可以保证函数地址永远不会变化。Umi Hooks功能还是非常强大的，有很多功能很强大的API。大家可以去官方文档看看 。

自定义 hooks 其实在我们的开发工作中，还是很常遇到的。 hooks 的好处就是可以抽离公共方法，像组件一样的随意使用，对于快节奏的开发工作还是很舒服的，比如你觉得 react hooks 或者 umi hooks 的api，不能满足自己的需求，也可以自己创新一些api。我这里举个例子，大家写 class 组件写的很多的话，会经常用的 this.setState() ，大家都知道 this.setState() 是异步执行，你无法直接拿到最新的 state 。 hooks 中的 useState 同样也是异步的，你无法直接获取到最新的 state ，所以我自己写了一个 useSetState 方法，用于在修改完状态后能够立即拿到最新的 state 。

我们在src/hooks文件夹下新建 useSetState.ts

使用的方式也很简单，基本和useState一致，只是在setState的时候提供一个回调函数。

这就完成了带回调的 useSetState hooks 的编写，不过这种写法不太推荐在 hooks 中使用，建议需要获取最新的数值都在 useEffect 或者 useUpdateEffect(umi hooks) 中去。

状态管理选择的Mobx,Mobx和Redux我都用过，不过当我习惯用Mobx后，就感觉还是Mobx更方便一些，所以更喜欢在项目中用Mobx,现在Mobx已经更新到5.0版本了，不过5.0版本并不支持ie11，所以如果想要兼容性可以选并指择4.0的版本，或者Redux。

这里推荐一个针对Mobx的库， mobx-react-lite :它是基于 React 16.8 和 Hooks 的 MobX 的轻量级React绑定。

这个主要影响的是调用方法的形式，对于Mobx的书写是一样的，比如写一个加减数值：

这里你的typeScirpt可能会编译不了，会报错：Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.

解决方法是在 tsconfig.json 加入配置：

完毕以后，一定要把 storeProvider 包裹所需要共享状态的页面，我这里直接放到app.tsx

剩下来就仅仅是调用的事情了：

此外axios的配置应该大家都知道，所以我这也不多说了，具体在我的源码里面也有，utils下的axios.ts

加入了打包分析 webpack-bundle-analyzer speed-measure-webpack-plugin

加入了打包进度条 webpackbar

加入了打包压缩 compression-webpack-plugin terser-webpack-plugin

还对包进行拆包

开发环境的域名代理 devServer

加快打包速度，还可以考虑删除antd-icons，单独去iconfont网站下，按需引入。不然打包会费很多时间

引入dotenv-cli

新增开发环境配置文件 .env.development 和 .env.production 两个文件

然后修改package.json中的启动脚本：

现在 yarn start 或者 yarn build 就会根据环境配置来处理。

还有一些细节的调整，会尽力将这个框架更加完善的。

github地址：

欢迎star 和提意见

关于前端框架react和前端框架vue的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。