🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 3 篇,主要介绍『Dva』的使用
在上一篇文章中,我们介绍了『Ant Design』的主题定制,到此为止 Ant Design 的内容就介绍到这,在企业开发当中我们只需要安装 Ant Design 导入 Ant Design,找到你自己需要使用的组件,把需要使用的组件拷贝到项目中,然后看一下组件提供了什么样的属性与方法,根据提供的属性和方法来进行使用即可。
Ant Design 除了封了了 PC 端一些常用的组件以外,还封装了移动端的组件,如果您想看一下他封装了那些移动端组件,你可以搜索『Ant Design Mobile』,然后进入官网查看。
Ant Design Mobile 官网:度娘 Ant Design Mobile 打开官方网站后,找到 Web 组件
:
在这个里面就可以看到他封装了那些组件,使用方式和之前讲解的 Ant Design 的使用方式是一样的,只不过这里的组件是移动端的组件,如果您想要使用移动端的组件,那么就可以使用这里的组件,所以我就不再介绍了。
这篇文章我们就来介绍『Dva』的使用,那么什么是『Dva』呢?
dva 是一个轻量级的应用框架,是一个基于 redux
和 redux-saga
的数据流解决方案,也就是说使用它能让我们更轻松的,更简单的去保存数据,并且呢这个 dva 的这个框架,内部内置了 react-router、redux、redux-saga
,所以我们在使用 dva 的时候,就不需要再去安装这些依赖了,直接安装 dva 就可以了。
了解完了什么是 dva 之后,我们就来看一下 dva 的使用。
首先来到官方网站:度娘 dva 官网
官方网站的介绍我们就不用看了,我们先使用 create-react-app 创建一个项目,create-react-app 是什么这里不赘述,如果您不知道的话,可以去看一下我之前写的文章,这里我创建了一个叫做 dva-demo 的项目:
create-react-app dva-demo
项目创建完毕了,接下来就通过这个项目加上 dva 来编写一个 React 项目,这里我们就来简单点,我就渲染一个 App 组件即可。
要想使用 dva,那肯定不用多说,我们需要先安装 dva,安装 dva 的命令如下:
npm install dva --save
--save
是什么意思呢?就是把 dva 安装到我们的项目当中,然后在 package.json 文件中的 dependencies 中添加 dva 的依赖,这样的话,我们在项目中就可以使用 dva 了。
然后找到 index.js 文件,在顶部导入 dva:
import dva from 'dva';
要想要使用 dva,我们需要先创建一个 dva 的实例,创建 dva 实例的方式如下:
import dva from 'dva'
导入的其实是一个方法,我们需要调用这个方法,然后把调用的结果赋值给一个变量,这个变量就是 dva 的实例,代码如下:const app = dva();
创建 dva 实例之后,就可以利用这个实例来渲染我们的组件了,那怎么使用这个实例来渲染组件呢?首先我们得要定义自己的组件然后再渲染,所以我们先定义一个根组件,叫做 App 组件,代码如下:
function App() {
return (
<div>
App
</div>
);
}
然后我们需要把这个 App 组件渲染到页面当中,那么怎么渲染呢?我们需要调用 dva 实例的 app.router()
方法,这个方法接收一个函数,这个函数的返回值就是我们要渲染的组件,这个叫做注册路由表,意思是告诉 dva 需要渲染哪个组件,代码如下:
app.router(() => <App />);
告诉 dva 渲染哪个组件之后,我们还需要真正的去渲染一下,就是启动 dva,启动 dva 的方式如下:
app.start('#root');
start 方法接收一个参数,这个参数是一个选择器,这个选择器是用来告诉 dva 渲染到哪个元素上,这里我们渲染到 id 为 root 的元素上,所以我们需要在 index.html 文件中添加一个 id 为 root 的元素,这个元素脚手架已经帮我们添加好了,我们不需要再添加了。
到这里我们就完成了 dva 的使用,我们来看一下效果:
我们可以看到页面上渲染出了 App。
好了到此为止这个就是如何去使用 dva 来渲染我们的组件,和过去的方式是有一点点的不同的,过去我们怎么渲染的,是不是直接调用 render 方法,现在呢,现在不是调用 render 方法了,而是调用 dva 实例的 router 方法,然后把渲染的组件传递给这个方法,然后再调用 dva 实例的 start 方法,把渲染的元素传递给这个方法,这样就可以渲染我们的组件了。
dva start 就是设置渲染到什么地方,好了这样就可以渲染我们的组件了,这就是 dva 的使用。
通过本文的学习,您可以掌握以下知识点:
🐤如果您觉得本文对您有所帮助,欢迎点赞、收藏或分享,您的支持是我创作的最大动力!
这篇文章的内容就介绍到这里,期待我们下次的相遇。感谢您花时间阅读,如果有任何问题或想法,欢迎在评论区留言。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。