响应式系统与 React | 青训营

85 阅读1分钟

1. React的历史与应用

  • 应用:

(1) React可以用于进行前端的开发,如Facebook网页版、Netflix网页版。

(2) React可以用于移动原生开发,如Instagram等。

(3) React可以结合Electron,进行桌面应用开发。

image.png

  • 发展历史:

image.png

image.png

image.png

2. React的设计思路

image.png 其中“状态”是指声明的变量。

image.png 转换式系统的特点是:给定输入,求解并返回输出的系统。而响应式系统的特点是:监听事件,由消息驱动。前端UI系统往往都属于响应式系统。

image.png

image.png

image.png

image.png

image.png

  • 对于思考1:是单向数据流,只能父组件给子组件传数据(向下传递),不能子组件给父组件传数据。
  • 对于思考2:通过状态管理库解决,详见第4大点。
  • 对于思考3:详见第3大点。

image.png

3. React的实现

(1)返回的JSX发生变化时,如何更新DOM? 答:利用虚拟DOM(本身不是DOM),因为DOM的操作是非常消耗性能的。

image.png

image.png

4. React状态管理库

image.png

image.png

image.png

useModel的使用(也是用于状态管理的方法):

image.png

5. 应用级框架科普

image.png

image.png