andy00614

andy00614 查看完整档案

北京编辑河北大学  |  通信工程 编辑  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

andy00614 提出了问题 · 8月17日

关于webpack的替代性问题(为何用js编写)

最近在研究webpack,突然有几个小问题很有困惑,不懂就问,希望大佬解惑。
第一个就是webpack为什么用js来驱动,最近涌现了很多编译js的生态工具,比如说deno的底层用了rust,是一个非常高效的语言,速度完全和js不是一个量级,那为什么webpack不用rust去写呢。
第二个问题是esbuild的出现,基于go语言,它的性能也是webpack的百倍以上,可必须基于esmodule,为什么之前的commonjs就不可以呢(一直没太明白为什么cjs不能很好的treeshaking)
第三个问题是语言的差异能造成这么大的性能差距吗,之前好像看过一些性能测试,好像js不会比go之类的语言差那么多性能昂啊

关注 5 回答 3

andy00614 赞了回答 · 3月24日

fetch get方法和post方法的使用区别

这个 API 的后端设计的不好,应该直接报 405 method not allowed. 这个 API 的后端同时接受 GET 和 POST 但是参数呢却只看 QueryString 部分的,并不检查 request body,所以是个不好的例子。 你只需把你的 GET 的例子的 method 改成 POST,保留 queryString 里传 key 参数的做法,这个API就能正确返回。

顺带说一嘴,GET 和 POST 都可以带 request body 都可以在 url 路径里问号后面加QueryString 参数,只不过根据语意 GET 请求一般不会带 request body。

关注 2 回答 3

andy00614 关注了专栏 · 2019-11-19

边城客栈

全栈技术专栏

关注 3147

andy00614 回答了问题 · 2019-10-30

echarts中怎么阻止默认的events事件?(例如datazoom)

你好,请问找到方法了吗

关注 2 回答 1

andy00614 赞了文章 · 2019-10-27

发布 react 组件到 npm 上

我发布了我的第一个 npm 组件,一个基于 react 的 3d 标签云组件。在这途中我也是遇到了很多的坑,花在完善整个发布流程的时间远多于写这个组件本身的时间,所以我记录下我觉得一个正常的 react 组件的发布流程

最后记录这篇文章花的时间比我完成整个组件的时间都多,最终希望能给新手带来帮助

在整个发布组件的过程我做了如下几件事儿:

  1. 开发组件
  2. 编写 Readme
  3. 推送到 github,并且把 demo 放到 github page 上
  4. 发布组件到 npm 上

开发组件

创建项目文件夹并初始化 npm package ,确保你创建的组件名称没有在 npm 上被使用过, 这里我们用 react-demo 作为示例

mkdir react-demo
cd react-demo
npm init

npm init 是生成初始的 package.json 的命令,在 npm init 的时候,你可以根据你自己的需要进行填写你的组件信息。或者直接使用 npm init -y 采用默认的,后面自己再去修改。

首先安装 react 相关的包:

npm i react react-dom -D

采用 babel 编译相关的依赖:

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D

采用 webpack 做构建,webpack-dev-server 作为本地开发服务器,所以需要安装如下依赖:

npm i webpack webpack-cli webpack-dev-server -D

我这里为了简单演示,只安装 babel-loader 用来编译 jsx,其他 loader 安装自己的需要自己安装。

npm i babel-loader -D

另外再安装一个 webpack 插件 html-webpack-plugin ,用来生成 html:

npm i html-webpack-plugin -D

然后再添加上常规的 startbuild 脚本,package.json 如下:

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

当然,你也可以直接把我这个 package.json 复制过去,然后 npm install 进行依赖的安装,也可以一个一个的安装。

一个最基本的组件只需要编译 jsx,所以我这里没有安装 css 以及处理其他的 loader,这篇文章的重点不是讲 webpack 的,所以其他的自行解决,有 webpack 问题可以私聊我。

然后我们再创建如下的目录结构:

├── example // 示例代码,在自己测试的时候可以把测试文件放到 src 里
│   └── src // 示例源代码
│       ├── index.html // 示例 html
│       └── app.js // 添加到 react-dom 的文件
├── package.json 
├── src // 组件源代码
│   └── index.js // 组件源代码文件
├── .babelrc
├── .editorconfig // 不必须的,但是建议有
├── .gitignore // 如果要放到 github 上,这个是需要有的
└── webpack.config.js

下面我们再创建一个最简单的组件,来进行演示:

/*** src/index.js ***/
import React from 'react';
const ReactDemo = () => (
 <h1>这是我的第一个 react npm 组件</h1>
);
export default ReactDemo;

接下来添加一个 demo

<!-- examples/src/index.html -->
<html>
<head>
    <title>My First React Component</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
    <div id="root"></div>
</body>
</html>
/*** examples/src/app.js ***/
import React from 'react'
import { render } from 'react-dom'
import ReactDemo from '../../src'

const App = () => <ReactDemo />
render(<App />, document.getElementById('root'))
注意 demo 中的 ReactDemo 是从 ../../src 中导入的

接下来配置非常简单的 webpack, 在项目根路径下创建 webpack.config.js 文件

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./example/src/index.html"),
    filename: "./index.html"
});

module.exports = {
    entry: path.join(__dirname, "./example/src/app.js"),
    output: {
        path: path.join(__dirname, "example/dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            use: "babel-loader",
            exclude: /node_modules/
        }]
    },
    plugins: [htmlWebpackPlugin],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {
        port: 3001
    }
};

Webpack 的配置文件主要做了如下事情:

  • 使用 example/src/index.js 作为项目入口,处理资源文件的依赖关系
  • 通过 babel-loader 来编译处理 js 和 jsx 文件
  • 通过 html-webpack-plugin 自动注入编译打包好的脚本文件
  • 为 demo 启动端口为 3001 的服务

然后再配置一下 babel,咱们的 babel 主要做两件事,将 jsx 编译成 es5,然后再加一个通用的 env,所以 .babelrc 配置如下:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

可以看到之前的 package.json ,我这里 babel 安装的是 7.x,那么 babel-loader 就应该是 8.x 才行,然后 babel 7.x 相对于之前的配置是不同的,要用这个配置,版本一定要跟我的相同,不然配置可能会不一样。

然后现在执行 npm start,然后再访问 localhost:3001 就可以访问到了。

编写 README

编写 README,如果你不知道该如何编写,我给你提几点建议,你可以选择你觉得必要的点来写:

  1. logo
  2. 官方主页
  3. 介绍
  4. 安装
  5. 快速开始
  6. 功能列表
  7. 截图
  8. todoList
  9. 不足之处
  10. FAQ
  11. Change Log(更新日志)

添加徽章

当你写完 README 之后,我们将添加一些来自 shields.io 的时髦徽章,让人们知道我们又酷又专业。

想添加什么样的徽章看自己喜欢吧,种类有很多。

可以点击这里看我之前写的 3d 标签云的 README。

现在基本上可以发布了,但是要是能提供一个在线的 demo 让别人在用这个组件的时候可以看到效果就更好了。

在 GitHub Pages 上发布一个在线 demo

发布在线 demo 可以直接用 Github Pages 来帮助我们托管,通过 webpack 构建生产环境版本,然后发到 Github 上去即可。

首先去 Github 创建一个用来存放你组件代码的仓库。

然后把你的项目初始化成 git 项目:

git init

再添加远程仓库,将本地仓库和远程仓库关联起来。

git remote add origin git@github.com:crazylxr/react-demo.git

接下来我们可以安装 gh-pages 来帮助我们发布到 github pages:

npm i gh-pages -D

为了方便记忆,后续能更快的发布,这些命令我们可以写成 npm-scriprt,所以我们增加两个脚本:

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "deploy": "gh-pages -d examples/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

添加了 deploy 脚本和 publish-demo,以后需要发布 demo 的时候只需要 npm run publish-demo 即可。

然后我们就可以 build 项目之后再将 expamples/dist 发布到 gh-pages 分支:

npm run build
npm run deploy

或者直接

npm run publish-demo
注意:这里只会将 expample/src 下的文件发布到 ph-pages 分支,master 分支依然没有到 github 上,如果你要把源码放到 github 的 master 或者其他分支上,还是需要自己 push 的。

这个时候,我们可以通过 crazylxr.github.io/react-demo 访问到我们写的 demo。crazylxr 是 github 的 username,react-demo 是仓库名,注意改成你自己的。

编译源码

我们现在的源码是 jsx 的,所以我们需要通过 babeljsx 编译为正常浏览器能访问的代码。我们可以通过 babel-cli 来编译我们代码,直接编译 src 目录,到 lib 文件夹。更多命令见 babel-cli

npx babel src --out-dir lib

执行完这个命令,就把生成一个 lib 文件夹,然后里面的 index.js 就是编译过后的文件,是可以直接发布到 npm 的文件。

然后将这个编译命令写到 script 里,package.json 如下:

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "compile": "npx babel src --out-dir lib",
    "deploy": "gh-pages -d example/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

那么以后要编译 src 下面的代码,只需要执行:

npm run compile

现在我们已经有编译好的代码了,接下来就可以发布到 npm 供其他人使用了。

发布 npm 包

在发布以前我们是需要一些准备:

注册 npm 账户:

在这里](https://www.npmjs.com/) 注册一个 npm 账号。

登录

在终端输入:

npm adduser

也可以用:

npm login

然后你会得到一个让你输入usernamepasswordemail 的提示,把它们填在相应的位置。

关于 package.json 需要注意的点

package.json 里面的配置信息非常重要,我解释一下几个重要的配置。

  • name: 包名,如果你学习的话建议加一个 scoped,就是我上面的 @taoweng/react-demo 而不是 react-demo,因为 npm 包特别的多,很容易重复。这样这个包就会是私有的,可以通过 npm publish --access=public 将这个包变为共有的包。
  • version: 包的版本,每次发布包的版本不能和上次一样。详细规范可见这里
  • description:包的简介。
  • repository:适合写 Github 地址,建议写成::username/:repository
  • license:认证。不知道该用什么的,就写MIT 吧。
  • main:包的入口文件。就是引入这个包的时候去加载的入口文件。
  • keywords:添加一些关键词更容易使你的包被搜索到。

更详细的 package.json 配置可见官网

我这里简单的添加了这些信息:

{
  "name": "@taoweng/react-demo",
  "version": "1.0.0",
  "description": "react demo",
  "main": "lib/index.js",
  "repository": "crazylxr/react-demo",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open development",
    "build": "webpack --mode production",
    "compile": "npx babel src --out-dir lib",
    "deploy": "gh-pages -d example/dist",
    "publish-demo": "npm run build && npm run deploy"
  },
  "keywords": ["react", "demo"],
  "author": "taoweng",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "gh-pages": "^2.0.1",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "dependencies": {}
}

这些配置信息都会在 npm 包的页面显示出来的,所以能填还是填一下:

最后我们在项目中添加 .npmignore 文件,跟 .gitignore 的作用一样,就是在发布 npm 的时候需要忽略的文件和文件夹:

# .npmignore 
src
examples
.babelrc
.gitignore
webpack.config.js

这个时候我们就可以发布到 npm 了:

npm publish

如果你是私有包,可以这样发布:

npm publish --access=public

结语

以后发布新版本的时候,只需要更改一下 package.json 里面的 version 版本号,然后执行 npm publish 和 npm run publish-demo 就可以同步 npm 和 demo。

不过如果想让你的组件在社区里给更多人用,你需要把 README 写得更好一点,然后添加好自动化测试,不然别人不太敢用。

另外在写组件之前可以先了解下有没有类似的组件了,如果有就直接用吧,咱们就站在巨人的肩膀上,把自己宝贵的时间放在创造价值上。

最后整个项目的源代码见 github

参考文章

另外

同时你也可以在这些地方找到这篇文章:

  1. 个人网站
  2. github blog

另外有兴趣可以关注我的公众号:前端桃园

查看原文

赞 2 收藏 1 评论 1

andy00614 提出了问题 · 2019-06-24

请问redux和context之间的关系

请问一个问题,redux通过改变的是root组件的context,如果一个组件改变了store的数据,相当于root的context发生了变化,那为什么connect的组件重新渲染了,而root组件并不重新渲染?

或者我现在的另一个理解是,dispatch后并没有改变context的值,store里的值和context并没有关系,可是这样又觉得比较矛盾...

请大神讲解一下

关注 3 回答 1

andy00614 提出了问题 · 2019-03-26

关于树形展开的盒子布局的问题

如图,现在这个样式我已经做出来了,因为它是树形嵌套的关系,我的思路是把每个盒子都设置成绝对定位,然后子盒子根据父盒子进行位置的偏移,但是现在有一个问题来了,比如我在同一级展开两个盒子,由于绝对定位脱离文档流,会导致子盒子重合。。(比如电信诈骗那个栏展开了三个盒子,下面的街头骗术再展开会导致下一级有重合)想了好久没有思路,感觉要改变整体的实现方式,请大神给个思路,感激不尽
clipboard.png

关注 4 回答 3

andy00614 提出了问题 · 2019-02-23

关于串行promise的一个问题

现在用这样一段代码:

(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('task1 -> 3s')
      resolve()
    }, 3000);
  })
  .then(() => {
      setTimeout(() => {
        console.log('task2 -> 2s')
        Promise.resolve()
      }, 2000);
  })
  .then(() => {
    setTimeout(() => {
      console.log('task3 -> 1s')
    }, 1000);
  })
})()
输出的顺序是 task1 -> task3 -> task2

如果改成:

(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('task1 -> 3s')
      resolve()
    }, 3000);
  })
  .then(() => {
    return new Promise((resolve) => {
      setTimeout(() => {
        console.log('task2 -> 2s')
        resolve()
      }, 2000);
    })
  })
  .then(() => {
    setTimeout(() => {
      console.log('task3 -> 1s')
    }, 1000);
  })
})()

就可以了
而如果将第二个then 改成再返回一个promise就会没问题,请问这是为什么,我的想法是,第一种用Promise.then()不也是等待这个异步函数执行完再执行下面的内容吗?

请指教哪里理解的不对,谢谢了~

关注 2 回答 2

andy00614 赞了文章 · 2019-02-12

ES6系列文章 异步神器async-await

视频讲解

关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。

async-await和Promise的关系

经常会看到有了 async-await、promise 还有必要学习吗async await优于promise的几个特点,接收了这些信息后,就蒙圈了。现在才知道,async-awaitpromisegenerator的语法糖。只是为了让我们书写代码时更加流畅,当然也增强了代码的可读性。简单来说:async-await 是建立在 promise机制之上的,并不能取代其地位。

基本语法

async function basicDemo() {
    let result = await Math.random();
    console.log(result);
}

basicDemo();
// 0.6484863241051226
//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

上述代码就是async-await的基本使用形式。有两个陌生的关键字asyncawait,同时函数执行结果似乎返回了一个promise对象。

async

async用来表示函数是异步的,定义的函数会返回一个promise对象,可以使用then方法添加回调函数。

async function demo01() {
    return 123;
}

demo01().then(val => {
    console.log(val);// 123
});
若 async 定义的函数有返回值,return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();

await

await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部,不能单独使用。

function notAsyncFunc() {
    await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西,但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(' enough sleep~');
        }, second);
    })
}
function normalFunc() {
    console.log('normalFunc');
}
async function awaitDemo() {
    await normalFunc();
    console.log('something, ~~');
    let result = await sleep(2000);
    console.log(result);// 两秒之后会被打印出来
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15  enough sleep~

希望通过上面的 demo,大家可以理解我上面的话。

实例

举例说明啊,你有三个请求需要发生,第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果。若用 ES5实现会有3层的回调,若用Promise 实现至少需要3个then。一个是代码横向发展,另一个是纵向发展。今天指给出 async-await 的实现哈~

//我们仍然使用 setTimeout 来模拟异步请求
function sleep(second, param) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(param);
        }, second);
    })
}

async function test() {
    let result1 = await sleep(2000, 'req01');
    let result2 = await sleep(1000, 'req02' + result1);
    let result3 = await sleep(500, 'req03' + result2);
    console.log(`
        ${result3}
        ${result2}
        ${result1}
    `);
}

test();
//req03req02req01
//req02req01
//req01

错误处理

上述的代码好像给的都是resolve的情况,那么reject的时候我们该如何处理呢?

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('want to sleep~');
        }, second);
    })
}

async function errorDemo() {
    let result = await sleep(1000);
    console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~

// 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下
async function errorDemoSuper() {
    try {
        let result = await sleep(1000);
        console.log(result);
    } catch (err) {
        console.log(err);
    }
}

errorDemoSuper();// want to sleep~
// 有了 try catch 之后我们就能够拿到 Promise.reject 回来的数据了。

小心你的并行处理!!!

我这里为啥加了三个感叹号呢~,因为对于初学者来说一不小心就将 ajax 的并发请求发成了阻塞式同步的操作了,我就真真切切的在工作中写了这样的代码。await 若等待的是 promise 就会停止下来。业务是这样的,我有三个异步请求需要发送,相互没有关联,只是需要当请求都结束后将界面的 loading 清除掉即可。
刚学完 async await 开心啊,到处乱用~

function sleep(second) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('request done! ' + Math.random());
        }, second);
    })
}

async function bugDemo() {
    await sleep(1000);
    await sleep(1000);
    await sleep(1000);
    console.log('clear the loading~');
}

bugDemo();

loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的(若观察效果请发真实的 ajax 请求)
那么,正常的处理是怎样的呢?

async function correctDemo() {
    let p1 = sleep(1000);
    let p2 = sleep(1000);
    let p3 = sleep(1000);
    await Promise.all([p1, p2, p3]);
    console.log('clear the loading~');
}
correctDemo();// clear the loading~

恩, 完美。看吧~ async-await并不能取代promise.

await in for 循环

最后一点了,await必须在async函数的上下文中的。

// 正常 for 循环
async function forDemo() {
    let arr = [1, 2, 3, 4, 5];
    for (let i = 0; i < arr.length; i ++) {
        await arr[i];
    }
}
forDemo();//正常输出
// 因为想要炫技把 for循环写成下面这样
async function forBugDemo() {
    let arr = [1, 2, 3, 4, 5];
    arr.forEach(item => {
        await item;
    });
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier

refs

不知道,我的意思有没有传递给大家。下面推荐几篇优秀的文章。
async 函数的含义和用法
ES7 Async Await 聖經
Understanding JavaScript’s async await

qrcode_for_gh_3e207eccee76_258 (3).jpg

查看原文

赞 297 收藏 261 评论 30

andy00614 提出了问题 · 2019-02-11

关于redux的异步请求中间件问题

问题是这样的,例如我现在有一个数据需要请求,将这个请求到的数据传递给redux,我的做法是这样(伪代码):

  function getData() {
    return fetch(...)
  }
  function fn() {
    getData().then(res=>{
      this.props.dispatch({
        type:'CHANGE_DATA',
        data:res
      })
    })
  }

而利用中间件的话(redux-thunk),相当于给dispatch中塞了一个函数。本质的区别就是,我上面的做法,先执行了一个异步函数,再把结果给dispatch,而中间件是将这个函数放在了dispatch里面,所以这两个做法本质上不就没区别吗,为何还要用中间件?这是我的理解,不知道理解错误的地方在哪里,还希望大神朋友们能给个提醒,谢谢啦~

关注 1 回答 1

认证与成就

  • 获得 11 次点赞
  • 获得 14 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 13 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-04-27
个人主页被 531 人浏览