『Dva』使用

原创

BNTang

修改于 2024-01-22 15:15:14

1570

修改于 2024-01-22 15:15:14

文章被收录于专栏：『Ts + React』项目实战

一、前言

🐤本篇文章是『从零玩转 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

1.什么是『Dva』

dva 是一个轻量级的应用框架，是一个基于 redux 和 redux-saga 的数据流解决方案，也就是说使用它能让我们更轻松的，更简单的去保存数据，并且呢这个 dva 的这个框架，内部内置了 react-router、redux、redux-saga，所以我们在使用 dva 的时候，就不需要再去安装这些依赖了，直接安装 dva 就可以了。

了解完了什么是 dva 之后，我们就来看一下 dva 的使用。

2.使用

首先来到官方网站：度娘 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 实例的方式如下：

创建 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 的使用。