react 思想 划分组件 以及state的判断

 

在这里你会看到，我们的简单应用中有5个组件。我们把每个组件展示的数据用斜体表示。

1. FilterableProductTable (橙色): 包含了整个例子
2. SearchBar (蓝色): 接受所有的用户输入
3. ProductTable (绿色): 根据用户输入过滤并展示数据集合
4. ProductCategoryRow (绿松石色): 展示每个分类的标题
5. ProductRow (红色): 用行来展示每个产品

对应节点

FilterableProductTable

• SearchBar

• ProductTable

   

  • ProductCategoryRow
  • ProductRow

要构建一个用于呈现数据模型的静态版本的应用程序，你需要创建能够复用其他组件的组件，并通过 props 来传递数据。props 是一种从父级向子级传递数据的方法。如果你熟悉 state 的概念， 在创建静态版本的时候不要使用 state。State 只在交互的时候使用，即随时间变化的数据。由于这是静态版本的应用，你不需要使用它。

state的判断

1. 它是通过 props 从父级传来的吗？如果是，他可能不是 state。
2. 它随着时间推移不变吗？如果是，它可能不是 state。
3. 你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state。