我们说到组件化,一般会用components这个词,多个components组合形成一个page,不同的page用router调度。
components应该是和业务无关的,它只负责渲染给入的数据。比如按钮是一个组件,可能有一个参数决定了它的尺寸,一个参数决定了它是否可以点击,但是点击这个按钮之后会发生什么,就不是按钮这个组件需要知道的事情了。
所以我们的组件都是业务无关,然后把所有的数据放在page中,去调度组件的使用么?这显然又有哪里不太对。
问题出在我们在这里面少了一层结构,components要组成module,然后module和一些简单components一起形成page。
module就是题主说到的TodoItem和TodoList合在一起的东西。对内来看,它自己持有一些数据和方法,用来决定TodoItem的渲染,对外又是一个简单的props接受数据。
components和modules,组件和模块,或者叫做木偶组件和智能组件。
木偶组件是有简单状态或者无状态的,数据几乎全部依赖于输入。而智能组件则会拥有一些方法,用来修改持有的数据。智能组件可以持有若干个木偶组件或者其他的智能组件,可以理解为组件树的非叶子节点,通过自身数据变化,进而操纵子组件的内容。
可以由input决定,可以有TodoList决定,甚至可以由整个根组件(page)决定。
input应该是一个木偶组件,就像是公司最底层的员工,只能听命于领导埋头做事,并没有决策的权利。所以把方法安排在input上是不合适的。
组件是公用的一些方法
模块是按照设计出来的具体实现
组件是构成模块的基础