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

35 阅读2分钟

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

由于之前学习的是vue,没有怎么了解React框架,所以这节课打算好好听听,一个小时的课应该可以稍微有一些入门,到时候再去决定是否深入学习。

React设计思路

UI编程痛点:(1)状态更新,无法自动更新UI,需要手动调用DOM进行更新。(2)欠缺基本的代码层面的封装和隔离,代码层面没有组件化。(3)UI之间的数据依赖关系需要手动维护,如果依赖链路长,会遇到回调地狱的情况。

响应式系统类似于:检测警报,如果用户不进行动作,不会对此进行响应。 而转换式系统则更像给定输入求解输出,类似计算器一类。

所以响应式编程希望的功能为:

image.png

React组件化

image.png

例子

image.png

当前价格属性属于Root节点,当前价格由于选区组件决定。

  1. React是单向数据流,永远是父组件给子组件传递信息,子组件可以执行父组件传递来的函数,对父组件中属性进行更改。
  2. 状态不合理上升(待解决)
  3. 组件状态改变后如何更新DOM(待解决)

image.png

为了实现DOM的更新并保证效率(因为DOM对象的删除再渲染非常消耗时间),React使用的是Virtual DOM,它赋予了React声明式的API:您告诉React希望让U是什么状态,React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

image.png

image.png

React状态管理库

解决两个距离较远的组件无法进行沟通,或沟通起来需要放到共同父组件中的问题,可以使用一个类似仓库的东西,传递两者之间需要传递的状态,感觉有点类似Vue兄弟组件中的Bus

image.png

image.png