项目开发思考

注意组件大小

确认组件的智能拆分足够足够细致,智能分配专一。通用组件封装到资产库以便复用。部分组件注意ui和逻辑的解耦。

react虽然没有vue的组件逻辑清晰,但是可以参考vue组件的结构来编写react组件:

  • 拆分methods, computed(目前还没有集中管理好方案,建议暂时均以getter的方式直接注册在当前组件中)
  • 简化表单场景,统一由一个函数负责设置setState,毕竟组件内事件没有像redux那种监控溯因机制。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    constructor (props) {
    super(props);
    for (let method in this.methods) {
    console.log(method)
    this[method] = this.methods[method];
    }
    }
    methods = {
    testThis: () => {
    console.log(this.state)
    },
    testFunc () {
    console.log(this.state)
    }
    }
    render () {
    this.methods.testThis() // state
    this.methods.testFunc() // undefined
    this.testThis() // state
    this.testFunc() // state
    }

注意reducer的拆分

注重专一职能;但大量组合操作仍会带来调试困难(难以理解多个reducer的组合到底是什么操作),所以不要直接dispatch多个reducer,而是dispatch一个effect,让effect包含多个reducer即可。

另一个需要注意的问题是dva是不能在 effects中取到实时的state的。需要取实时state的操作都需要在reducer中进行,若下一reducer需要上一个reducer操作的结果作为参数,则直接使用state进行交流而不是参数(因为put不会得到返回值)

yield put的结果

1
2
3
4
5
{type: "entry/save", payload: {…}, @@redux-saga/SAGA_ACTION: true}
payload: {mode: 0}
type: "entry/save"
@@redux-saga/SAGA_ACTION: true
__proto__: Object

call和put的区别

yield call会“阻塞”后续的操作(实际上是回调);但yield put本质上和调用了dispatch相同。所以在执行yield put时内容如果包含异步操作则须谨慎。相比在vuex中直接使用async则方便很多(都是promise)。

吐槽

没有api文档开发起来的确很恶心,这种情况下尽量还是先把所有api的参数和结果测试一遍(postman好像不行,有限制?),而不是直接默认使用reducer。毕竟reducer们span出的向量空间不一定是所需解决问题空间,或者说不是api span出的空间。

另外脾气要好一点(虽然可能是忘吃糖的缘故),谦虚一点,不要明目张胆的diss别人。。。

Author: Lobay Kanna
Link: http://lobay.moe/2019/03/21/2019-3-21/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.