这是我参与「第四届青训营 」笔记创作活动的的第9天
React设计思路
UI编程的痛点
- 状态更新, UI不会自动更新, 需要手动调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离, 代码层面没有组件化
- UI之间的数据依赖关系, 需要手动维护, 如果依赖链路长, 则会遇到"Callback Hell"
响应式与转换式
React设计思路 - 组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态, 外部不可见
- 父组件可将状态传入组件内部
React(hooks)的写法
useState
传入一个初始值, 返回一个状态, 和set该状态的函数, 用户可以通过调用该函数, 来实现状态的修改.
useEffect
传入一个函数, 和一个数组, 数组是状态的数组, 称作依赖项, 该函数在mount(挂载)时, 和依赖项被set的时候会执行.
不要在循环, 条件或者嵌套中调用Hook
React的实现
- JSX不符合JS标准语法
- 返回的JSX发生改变时, 如何更新DOM
- State/Props更新时, 要重新触发render函数
React状态管理库
React状态管理库 - 核心思想
案例中, 当前价格的状态上升到根节点上, 是不合适的, 进而引入状态管理库.
