原文链接： react.dev/learn/think…
一、将UI分解为组件树
拆分组件标准： 单一责任原则，即理想情况下，组件应该只做一件事；
组件树： 根据设计层级及CSS层面考虑组件之间的深层次关联；
如果获得数据JSON结构标准的话，应该与UI形成自然映射的关系，组件树中的每个组件也自然对应一部分数据结构。
二、构建静态版本的React
确定组件入参props，根据入参描绘每个UI组件的静态样式；可以通过组件树的格式自上而下或自下而上的搭建静态组件。
三、查找 UI 状态的最小但完整的表示形式
为了使页面具有交互性，添加了state；
state是最小的更改数据集 ；
Props VS States
Props 就像传递给函数的参数。它们让父组件将数据传递给子组件并自定义其外观。
States 就像组件的内存。它允许组件跟踪一些信息并更改它以响应交互。
如何确定某变量是否是一个state？
- Does it remain unchanged over time? If so, it isn’t state.
它会随着时间的推移保持不变吗？如果是，则不是状态。 - Is it passed in from a parent via props? If so, it isn’t state.
它是通过道具从父级传入的吗？如果是，则不是状态。 - Can you compute it based on existing state or props in your component? If so, it definitely isn’t state!
你能根据组件中的现有状态或道具来计算它吗？如果是这样，那绝对不是状态！
四、确定state所在位置
如何确定state所在位置？
- 标识使用的组件
- 多个组件共同使用情况下查找共同父组件/共同父级之上
- If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component.
五、添加反向数据流
寻找setState调用的时机，从而进行state得修改
关于受控组件和不受控组件
- 受控组件：
-
- 受控组件是通过React组件的状态（state）来控制表单元素的值和行为。
- 表单元素的值由组件的状态(state)管理，每当表单元素的值发生变化时，会触发对应的事件处理函数来更新组件的状态。
- 通过事件处理函数和状态更新的过程，可以对表单值进行校验、处理或提交等操作。
- 受控组件提供了更精细的控制和处理能力，适用于需要对表单进行复杂操作和验证的场景。
- 不受控组件：
-
- 不受控组件是由DOM自身管理和维护表单元素的值和行为，React组件没有直接控制其值的方式。
- 表单元素的值由DOM自身维护，我们可以通过其他方式（例如使用ref）来获取表单元素的值。
- 不受控组件的变化不会触发React组件的状态更新，因此无法对其值进行直接的校验和处理。
- 不受控组件在某些简单场景下更简洁、直接，并且在一些特定情况下可能带来性能上的优势。
一个受控组件具备以下特点：
- 表单元素的值由组件的状态（state）管理。
- 通过给表单元素绑定
onChange事件处理函数来响应值的变化。 - 在事件处理函数中，通过更新组件的状态来反映值的变化。
