响应式系统与 React｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第8天

一、React的历史与应用

• 写前端应用，移动应用，桌面开发

FAX-js

• 引入组件式的思想
• 响应式：状态改变时，ui会自动更新
• 性能好
• 函数式地声明组件

• React生态

二、React的实现思路

js实现ui

• 状态不会自动更新
• 缺乏代码层面的封装和隔离，代码没有组件化
• ui之间数据以来，需要手动维护

转换式系统和响应式系统

• 转换式系统：给输入后求解输出
• 响应式系统：监听事件，发生了事件，就有另一个事件来响应，异步编程的过程

React

• 状态更新，ui自动更新

• 前端代码组件化

• 状态之间的互相依赖关系

• 单向数据流

• 组件化

• 当前价格只能放在Root，只有这样其他组件才能共享这个组件

• 三种设计

• 组件的生命周期

三、React（hooks）的写法

• 副作用：useEffect，只有当什么状态发生改变时候，才执行一次，有明确执行时机
• useState（参数，函数）当传进参数时，通过这个函数改变这个参数

Hooks使用法则

• Hooks就是像useState和useEffect这样的函数
• 不要在循环和嵌套的条件下使用

四、React的实现

• 三个问题
  • JSX不符合JS标准语法：转化为另一种符合语法的语言
  • 返回的JSX发生改变时如何更新DOM
  • State/Props更新时，要重新触发render含函数
• 虚拟DOM：解决更新DOM的问题

• 如何dif,局部最优的算法O(n)

五、React状态管理库

• 将状态抽离到UI外部进行统一管理
• redux，xstate，mobx，recoil

状态机

• 有当前的状态
• 收到外部事件，迁移到下一个状态

六、应用级框架科普

• modern.js/Reduck