react项目组件化思考

时间:2023-03-09 19:49:27
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里增删查改数据,从而实现业务组件的通信。

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