• react项目组件化思考


    三个原则

    • single store
    • render from top
    • immutable data

    single store,便于组件之间通信。
    render from top,因为store就一个,每次修改后,从最顶层开始渲染,依赖DOM diff和人工shouldComponentUpdate判断来提高渲染性能。
    immutable data,当你使用第三方组件,为了防止他内部对你的single store进行黑箱子修改操作,所以你可以传入immutable data给他。根据第三方组件的回调结果,自己来控制是否更改single store。

    组件类型

    通用基础组件

    两种实现方式。
    一,纯依赖props(无state),可通过forceUpdate来更新自己。
    二,有依赖state,通过componentwillreciveprops生命周期函数接受props,来更新state。

    业务基础组件

    相当于业务树的叶节点。如需复用,构建方式同通用基础组件二。

    业务路由组件

    相当于业务树的枝节点。也是业务基础组件的容器。负责路由父组件的props给子组件(业务路由组件或业务基础组件)。

    增删查改

    方式一:


    • 填写数据,验证数据,插入数据,重新查询数据列表。


    • 确认删除,重新查询数据列表。


    • 展现页数,展现条数。实际就是对总页数进行分页。


    • 填写数据,验证数据,更新数据,重新查询数据列表。

    方式二:
    适用于数据量不大的情况。
    增删查改,都使用同一套数据。

    思考


    • DOM用树表达,样式也可以用树表达,那么组件UI状态State,Store,Actions呢?
      为什么都用树表达?是为了一个组件的DOM,样式,State,Store,Actions能互相对应。
      五树合一,网页我有。

    • 业务组件的通信
      因为是一个store,业务组件里也基本不会有props,state。直接从一个store里增删查改数据,从而实现业务组件的通信。

    • 第三方组件
      使用设计不当的第三方组件,小心它对你正常业务代码的分离。

  • 相关阅读:
    【bzoj4372】烁烁的游戏 动态点分治+线段树
    【bzoj3730】震波 动态点分治+线段树
    【bzoj3125】CITY 插头dp
    【bzoj2310】ParkII 插头dp
    【bzoj1187】[HNOI2007]神奇游乐园 插头dp
    【bzoj1814】Ural 1519 Formula 1 插头dp
    【loj2325】「清华集训 2017」小Y和恐怖的奴隶主 概率dp+倍增+矩阵乘法
    【bzoj3518】点组计数 欧拉函数(欧拉反演)
    【bzoj5099】[POI2018]Pionek 双指针法
    【bzoj4311】向量 线段树对时间分治+STL-vector维护凸包
  • 原文地址:https://www.cnblogs.com/samwu/p/5469569.html
Copyright © 2020-2023  润新知