react官方文档笔记08--一个可以搜索过滤商品的小例子

根据美工的图层把效果图进行分层来设计组件,原则是一个组件只做一件事,

1. FilterableProductTable (orange): 
   
2. SearchBar (blue):  ProductTable (green): 
   
3. ProductCategoryRow (turquoise):
   
4. ProductRow (red): 
   

第二步骤:

    上一部我们已经确定了组件的定义与层级,接下来我们构建一个静态版本,不考虑交互,因为让输入与逻辑结构,静态版本不需要考虑逻辑部分,而交互需要考虑逻辑部分.在静态版本中只应该使用props,而不是state,state应该用在有dom交互的时候,随着时间或操作变化而变化.

对于小型程序,从上而下构建程序比较合适,大型app从下而上比较合适

在这步骤结束后,你就有了可以复用的渲染你数据的组件库,通过props自上而下传递给子组件,当data发生变化就调用renderDOM重新渲染.

第三步骤:

   不使用state的三个条件

    1 是否通过父组件传入

    2 是否需要变化

    3 是否通过其他props或者state计算出来

第四步骤

    默认数据流都是自上而下的,想要自下而上通知上层,可以把上层的函数通过props传递给子组件让子组件调用