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里增删查改数据，从而实现业务组件的通信。

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