阿里 React 框架 mirror 使用教程

HTML5 herman 1304浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

最近两天阿里一直占据着头条,一个是支付宝小程序,一个是 mirror 的发布。本文将详细的介绍 mirror 的原理,特点和使用。

Mirror 是一款基于 React、Redux 和 react-router 的前端框架,简洁高效、灵活可靠。

Mirror 使用的是react-router 4.x。

阿里 mirror

既然有了 React 阿里为什么又推出 mirror 呢?

这一切估计得从小程序说起。支付宝也推出了小程序,但是底层完全和微信小程序不同。并且支付宝的小程序是基于 React 的。但是 React 和 Redux 的一些缺点在支付宝小程序上将被放大,因此阿里推出了 mirror。

一个典型的 React/Redux 应用看起来像下面这样:

  • 一个 actions/ 目录用来手动创建所有的 action type(或者 action creator);
  • 一个 reducers/ 目录以及无数的 switch 来捕获所有的 action type;
  • 必须要依赖 middleware 才能处理 异步 action;
  • 明确调用 dispatch 方法来 dispatch 所有的 action;
  • 手动创建 history 对象关联路由组件,可能还需要与 store 同步;
  • 调用 history 上的方法或者 dispatch action 来手动更新路由;

从上面就可以看出 React/Redux 存在的问题。太多的 样板文件 以及繁琐甚至重复的劳动。

实际上,上述大部分操作都是可以简化的。比如,在单个 API 中创建所有的 action 和 reducer;比如,简单地调用一个函数来 dispatch 所有的同步和异步 action,且不需要额外引入 middleware;再比如,使用路由的时候只需要关心定义具体的路由,不用去关心 history 对象,等等。

这正是 Mirror 的使命,用极少数的 API 封装所有繁琐甚至重复的工作,提供一种简洁高效的更高级抽象,同时保持原有的开发模式。

Mirror 的特点

  • 极简 API(只有 4 个新 API)
  • 易于上手
  • Redux action 从未如此简单
  • 支持动态创建 model
  • 强大的 hook 机制

Mirror 的用法

使用 create-react-app 创建一个新的 app:

$ npm i -g create-react-app
$ create-react-app my-app

创建之后,从 npm 安装 Mirror:

$ cd my-app
$ npm i --save mirrorx
$ npm start

下面是使用 mirror 对 action 的用法,index.js 代码如下:

import React from 'react'
import mirror, {actions, connect, render} from 'mirrorx'

// 声明 Redux state, reducer 和 action,
// 所有的 action 都会以相同名称赋值到全局的 actions 对象上
mirror.model({
  name: 'app',
  initialState: 0,
  reducers: {
    increment(state) { return state + 1 },
    decrement(state) { return state - 1 }
  },
  effects: {
    async incrementAsync() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      actions.app.increment()
    }
  }
})

// 使用 react-redux 的 connect 方法,连接 state 和组件
const App = connect(state => {
  return {count: state.app}
})(props => (
    <div>
      <h1>{props.count}</h1>
      {/* 调用 actions 上的方法来 dispatch action */}
      <button onClick={() => actions.app.decrement()}>-</button>
      <button onClick={() => actions.app.increment()}>+</button>
      {/* dispatch async action */}
      <button onClick={() => actions.app.incrementAsync()}>+ Async</button>
    </div>
  )
)

// 启动 app,render 方法是加强版的 ReactDOM.render
render(<App/>, document.getElementById('root'))

从上面的代码中,可以看出 mirror 的代码很简洁,很高效。除了上面这些 mirror 还支持 Redux DevTools 扩展。mirror 使用额外的 Redux middleware 只需要在mirror.defaults 接口中指定即可。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 阿里 React 框架 mirror 使用教程