这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
内部状态
- Normal状态、
- Hover状态、
- Active状态、
- Disable状态
DOM与UI
DOM 树不是 JS 内部的一个变量， DOM 本身其实是浏览器内部维护的一个东西，我们只能通过调用 Java script 的 DOM 的 API 去修改DOM，而不是 DOM 本身是 Java 的一个变量，我可以随便随意去修改它，这是不一样的。 其实 DOM 和 UI 和实际看到 UI 是存在着一一对应的关系的。
组件化-组件划分准则
- 组件，它是组件的组合或者原子组件。e.g，root == 内容组件 + 底层组件
- 组件内部它拥有自己的状态，外部不可见。
- ——他肯定自己要有一个维护一个变量，他不可能什么什么状态都不维护，这样这个组件是不可能具有任何的记忆的。
- 父组件可以将状态传入组件的内部，从而控制子组件。
- ——接口化：一个组件我如果给他提供了复用的能力，我必须会去要开放一些接口出来，外部能够把这些变量传进来，内部再去消费这些变量并进行显示
- 灵活的复用的父组件->将自己的状态传入子组件->控制子组件的运转
- 只有父组件可以控制子组件，从上往下传导。向上找一个最近的祖宗节点，如果是root节点则很危险。两个组件需要共享状态，如果状态都上移到root节点，则失去组件复用初衷——所有状态都在root节点里面，引出[[react状态管理库]]。
状态的局部性
一个组件和其他组件
状态可能只是在组件内部去维护，其他的地方，不需要读变量。
这个时候其实状态就可以很好地放在组件中，e.g颜色，我可以很好地放在卡片里面。我我我，如果写代码的时候，这里面有 4 个卡片，我就可以遍历一下，生成 4 个卡片，我每个给每个卡片分别传入一个颜色，这时候颜色信息不需要去被什么顶栏去共享。 这时候这个状态就具备一个良好的局部的性质
CPU 访问内存，它本身也具备一个空间的局部性。我不可能随机地去各种各样访我，可能我在某一段时间内，我会对某一个内存的区间，我会频繁去访。这其实也是一种局部性。
如果是局部性的，我就尽量地把状态放在一起，这样最后我们的代码的聚合性就会很高。
状态上升
——如果你想让两个组件的状态共享，这个状态就应该归属于两个节点。向上寻找到最近的祖宗节点上
函数在js中是一等公民
当前价格怎么改变？因为当前价格属于 root 节点。但是触发当前价格改变的事件却不是源于 root 节点，而是源于型号选择面板和颜色选择面板
root节点写一个改变当前价格的函数，这个函数是一个变量.父组件可以往给组件，给给子组件传变量。我可以 root 往下传到内容，传到配置面板，再传到想要原则，再传到 iPhone 13 Pro 上。每当 iPhone 13 Pro on click 的时候，它就执行从 root 组件传下来的 change current value 的函数.这样 root 节点的 current value 就得到改变了。
- react 设计思想 单向数据流 父组件传给子组件状态，父组件传函数给子组件，子组件执行
- 怎么去解决状态的不合理上升的问题 [[状态管理库]]
- 组件的状态改变之后，我们怎么去更新DOM
组件本身声明了状态和UI的映射关系
f(状态) => UI
组件state状态 ： 内部私有状态 组件props状态：外部传入状态
组件可以由其他组件拼装而成
组件的生命周期
mounting ：一个组件，它要显示到 UI 上，我们可以认为它需要挂载到实际的 DOM 上。这个挂载本身其实它也是一个事件，就是我们 mounting 的过程，它挂载到实际 DOM 上，它需要执行constructor
- 挂载的时间点
- 卸载的时间点
- 状态改变的时间点
