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

彼岸an
49 阅读2分钟

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

设计思路

UI编程痛点

  • 单纯原生js写会很容易混乱

image.png

响应式与转换式

image.png

image.png

image.png

2.最好语义化

组件化

image.png

DOM是与实际看到的ui是存在一一对应的关系

image.png

3.父组件需要可以控制子组件

状态归属问题

image.png

1.只有放root结点才可以价格状态共享

2.大部分状态具有局部性

3.状态归属于两个节点向上最近的祖宗节点

image.png

1.单向 2.状态管理库

image.png

1.类似于数学函数映射

2.Props外部传入状态/State自身的状态

image.png

image.png

React(hooks)的写法

  • 副作用：对组件外部影响：1.组件挂载的时候执行一次-网络请求 2.当某个状态改变的时候执行一遍

hooks： 可以挂到react组件生命周期上面执行函数-基本是useState/useEffect。 不能在循环、条件语句、嵌套函数里面执行

React的实现

Problems

image.png

Problem2

只改变diff部分

image.png

  • 真实的DOM是页面内的

  • 虚拟的DOM是JS的对象

  • 对比真实与虚拟的，更新diff的地方

  • 指令式编程：c-过程

  • 声明式编程：就是一个指令，不需要底层的

  • 响应式编程：声明式编程的一个类别，而且还可以自己响应自己。

image.png

问题：很高位置的父组件发生改变会导致它的所有自组件也全部更新

image.png

将其中一个树变成另外一个树的最少步骤

image.png

三条规则

image.png

1.不同类型的时候：从这个结点到根节点全部替换

2.调用setState这种直接更新

React状态管理库

image.png

组件依赖于实际的数据store大部分存在于实际业务代码中。library不会这么用。

放在store-只放距离远的需要共享的，需要不同组件共享，

image.png

状态机

image.png

这些状态是被整个app所拥有的？-放在store里面的状态

因为共同依赖于一个状态库 因此可以共享状态

应用及框架科普

image.png

avatar
文章
阅读
粉丝