前端框架 React | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
一、React的历史与应用
- 前端应用：facebook，ins
- 移动应用：ins，discord
- 桌面应用：结合electron
二、React的设计思路
UI 编程痛点
- 状态更新，UI不会更新，需要手动调用 DOM进行更新。
- 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- UI之间的数据依赖关系，需要手动维护
响应式与转换式
- 响应式：事件--->执行既定的回调--->状态变更
- 前端UI：事件--->执行既定的回调--->状态变更--->UI变更
- 状态更新，UI自动更新。
- 前端代码组件化，可复用，可封装。
- 状态之间的互相依赖关系，只需声明即可。
React 设计与实现 - 组件化
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
组件设计
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态，前者是父组件传入的数据，后者是组件内部维护的数据
- 组件可由其他组件拼装而成
React 设计与实现 – 状态归属问题
React 设计与实现 – 生命周期
三、React（hooks）的写法
useState：传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用改函数，来实现状态的修改。useEffect：传入一个函数，禾一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。（有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage等）。HOOK使用法则:不要在循环，条件或嵌套函数中调用Hook。
