react ｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天

1. react 前身是faxjs, react是在faxjs基础上建设的

2. UI编程痛点:

   • 状态更新ui不会自动更新, 需要手动调用dom
   • 没有代码层面的封装和隔离, 没有组件化
   • ui之间的数据关系需要手动维护, 会造成回调地狱

3. 转换式系统: 给定输入, 求解输出 例如编译器

4. 响应式系统: 监听事件, 消息驱动 例如监控系统, ui界面

5. 响应式系统: 事件-->执行既定回调-->状态变更

6. 要求框架能够:

   • 状态更新, ui自动更新
   • 前端代码组件化
   • 状态之间的互相依赖关系, 声明即可

7. 总结

   • 组件是组件的组合/原子组件
   • 组件内拥有状态, 外部不可见
   • 父组件可以将状态传入组件内部

8. 组件设计

   • 组件声明了状态和ui的映射
   • 组件有props state两种状态
   • 组件可由其他组件拼装而成

9. 实现

   • 转译jsx
   • 使用虚拟dom 和dom有一样的树状对象, 可以和dom一一对应, 使用声明式编程使dom和状态匹配
   • 使用递归算法生成diff, O(n)

10. hooks

    • useState, 设置一个状态和更新状态的setState
    • useEffect, 在依赖更新时执行副作用函数

11. 状态管理, 使用外部的store来存储状态

12. 被整个app所拥有的状态就用store

13. 应用框架: nextjs modernjs blitz