在这里你会看到,我们的简单应用中有5个组件。我们把每个组件展示的数据用斜体表示。
FilterableProductTable
(橙色): 包含了整个例子SearchBar
(蓝色): 接受所有的用户输入ProductTable
(绿色): 根据用户输入过滤并展示数据集合ProductCategoryRow
(绿松石色): 展示每个分类的标题ProductRow
(红色): 用行来展示每个产品
对应节点
FilterableProductTable
SearchBar
-
ProductTable
ProductCategoryRow
ProductRow
要构建一个用于呈现数据模型的静态版本的应用程序,你需要创建能够复用其他组件的组件,并通过 props 来传递数据。props 是一种从父级向子级传递数据的方法。如果你熟悉 state 的概念, 在创建静态版本的时候不要使用 state。State 只在交互的时候使用,即随时间变化的数据。由于这是静态版本的应用,你不需要使用它。
state的判断
- 它是通过 props 从父级传来的吗?如果是,他可能不是 state。
- 它随着时间推移不变吗?如果是,它可能不是 state。
- 你能够根据组件中任何其他的 state 或 props 把它计算出来吗?如果是,它不是 state。