当你使用react 构建用户界面时,解构组件成单个的有层次的树层次的组件结构。自由组合这些组件，使数据流向这写组件，因此app静态的ui界面具备了交互
第一步：将ui解构为组件的层级和结构
类似的加入你的接口数据如下：
[ { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
{ category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
{ category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
{ category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
{ category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
{ category: "Vegetables", price: "$1", stocked: true, name: "Peas" } ]
原型类似如下：
1.思考你将如何组织布局的层级 使用单一组件的设计思想设计可复用组件，组件的颗粒度尽量小，职责单一。 2.如果你的json结构模型设计的很合理，很容易映射到ui层级上 3.将你的 UI拆分到组件，每个组件匹配到原型中的每个部分
4.在原型中辨别了组件，并将它们转化为了层级结构。在原型中，组件可以展示在其它组件之中，在层级结构如树形结构一般。
-
FilterableProductTable-
SearchBar -
ProductTableProductCategoryRowProductRow
-
第二步：构建静态版本
基于第一步的组件拆分，从上到下编写每个组件，对于复杂的UI结构，从下到上是一个更好的方式，对于简单场景，自顶向下是一个最优解。 这一步分别编写每个层级的组件,组件的状态都是静态的。使用静态状态渲染ui,保障组件的布局和ui模型是一致的；
第三步: 找出个组件的状态，组件的状态定义在哪一个层级 A(arg)->B(arg)->C(arg) a->c的属性传递[函数式组件的方式，如果状态在叶子节点，这样组件的扩展性会比较差，试想组件内部定义了状态arg,不接受其他组件的传递，组件的通用性就会差很多了]
为了使 UI 可交互，你需要用户更改潜在的数据结构。你将可以使用 state 进行实现。 其中哪些是 state 呢？标记出那些不是的:
- 随着时间推移 保持不变？如此，便不是 state。
- 通过 props 从父组件传递？如此，便不是 state。
- 是否可以基于已存在于组件中的 state 或者 props 进行计算？如此，它肯定不是state！ 让我们再次一条条验证它们:
state，它会随着时间的推移而变化，并且无法从任何东西中计算出来。类似文本框复选框等 React 使用单项数据流,数据流向是父组件传递到子组件，因此需要确定state 是属于哪个组件
决定 state 应该被放置于哪里:
1. 通常情况下，你可以直接放置 state 于它们共同的父组件。
2. 你也可以将 state 放置于它们父组件上层的组件。
3. 如果你找不到一个有意义拥有这个 state 的地方，单独创建一个新的组件去管理这个 state，并将它添加到它们父组件上层的某个地方。
第四步：添加反向数据流 A(func)->B(func)->C(func) a->c的事件传递
子组件的变动触发父组件的状态更新，即基于事件的传递到子组件，子组件调用父组件的回调方法;
react vs vue的组件挂载方式
这两行代码各自代表了 Vue 和 React 应用的初始化和挂载过程，尽管它们来自不同的框架，但它们的目标是相似的：将组件渲染到 DOM 中，以创建用户界面。
react 是基于jsx的 Babel 会把 JSX 转译成一个名为 `React.createElement()` 函数调用。
ReactDOM.render(<Index />, document.getElementById('root'));
vue 基于自定义的template模版,构建工具会调用 vue的compiler 编译成render函数[封装了dom api] 即普通js组件
createApp(App).mount('#app')
