React哲学

React哲学

一：UI组件层级划分

• 单一功能原则
  由外到内拆分为5个组件，关系如下
  

• FilterableProductTable

  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

二：创建一个静态版本

• 注意：最好将渲染 UI 和添加交互这两个过程分开。

三：确定 UI state 的最小（且完整）表示

1.该数据是否是由父组件通过 props 传递而来的？如果是，那它应该不是 state。
2.该数据是否随时间的推移而保持不变？如果是，那它应该也不是 state。
3.你能否根据其他 state 或 props 计算出该数据的值？如果是，那它也不是 state。

四：第四步：确定 state 放置的位置

• 由上组件可知，ProduceTable需要根据SearchBar的值来变化所渲染的数据。因此添加state的位置需要
• 包含两个公有的组件，或更上层组件。再FilterableProductTable组件中写更好

五：添加反向数据流

• 类似Input输入框等受控组件，本身具有onChange事件，接受的父组件传过来的props为静态值，需要
• 进行双向数据绑定。此时需要引用父组件的方法来添加反向数据流。