03月27, 2019

react hooks 数据流

在进入正题之前,先推荐三篇三篇文章,写的挺好的:

最近这边开启了一个新项目。出于对新技术的追求,果断使用了react hooks

react hooks就没法用react-hot-loader了,这个可能是我目前觉得有点不舒服的。(其实也还好,只是当有弹窗时,弹窗内容改变了,现在是整个刷新页面,而之前热更新弹窗会保留在那里)

数据流选择

数据流这一块,我选择了easy-peasy

基于以下几个考虑:

  • redux(总要让我思考是就近搞目录,还是整个大目录里面放相关的reducer、action以及常量)
  • mobx(似乎是可以的,但我经验比较少,相对来说redux用的多)
  • dva(感觉在有了react hooks之后,有点过时了,也许是我的错觉)
  • xredux(机缘之下认识了这货,链接在这里,但似乎和hooks不怎么搭配)

如果没用react hooks,我想我会选择xredux,理由是:它的侵入性比较小,我蛋疼redux主要是目录结构的问题。当然dva是很好的,不过我可能用不好redux-saga,这货强大的玩法真不会。

easy-peasy简单示例

那么我们来看看easy-peasy,它的用法很容易:

import React from 'react';
import ReactDOM from 'react-dom';
import { StoreProvider, createStore } from 'easy-peasy';

import "@babel/polyfill"; // async await必须要有这个才不会报错

// import { hot } from 'react-hot-loader';

import model from './model'

import App from './App';

// hot(module)(App);

const store = createStore(model);

function Root() {
  return (
    <StoreProvider store={store}>
      <App />
    </StoreProvider>
  )
}

ReactDOM.render(<Root />, document.getElementById('root'));

我们需要关注的就是model.js

alt

当然你可以拆成N个model,然后组装在一起玩:

alt

每个page容器的文件夹保留一个model.js文件即可:

alt

异步写法这一块:

alt

我说它和vuex比较像,是因为它的异步写法就像是mutation -> action

对于上面数据流的一些思考

这里有一个问题是,要不要把所有的状态state都维护在model.js里面。

显然是不用的。我个人的理解是,所有涉及到异步的数据可以考虑放到model.js中。

之前我会纠结一个点是:涉及到API的一些操作,是否搞一个独立的文件?但最终我释然了,是因为我的API已经非常颗粒化了,没必要再抽象一层所谓的action,而且这里面还得考虑一种场景,就是回调怎么处理。

假设我们有一个弹窗,里面是一个form表单,提交数据成功后是需要关闭弹窗的。那么如果将这个保存的action放到model.js,或者一个独立的action.js,都要考虑提供一个回调事件。真那么搞的话,感觉有些蛋疼了。

我对model.js里面的异步方法的理解是:任何的异步行为,最终都需要去同步地调用其他的action。

结语

react hooks写了一个小模块,暂时没碰到什么问题。不过也没有用什么高级的东西,如memoforwardRef,改日可以尝试一下。

另外我觉得使用react hooks可以更好地做单元测试,特别是写组件这一块(不做单元测试会死人的,请记住这句话!)。

本文链接:www.my-fe.pub/post/react-hooks-use-easy-peasy.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。