这是我参与第五届青训营伴学笔记的第六天

react

响应式的编程 库

raect的历史与应用

1.前端应用

2.移动原生开发

3.结合electron进行桌面开发

还可以写3D图

2010年第一次引入了组合式组件的思想 faxjs是react的原型

使用函数声明

2013年react正式开源

react的设计思路

UI编程

1.UI会自动更新

2.前端代码有封装和隔离

3.状态之间的互相依赖关系，只需要声明

响应式与转化式

转换式

给定输入求解输出

响应式

监听事件，消息驱动

响应式系统

事件--》执行既定的回调函数--》状态变更--》UI更新

组件化

1.组件的组件的组合

2.组件内部要有自己的状态，外部不可见

3.父组件可将状态传入组件内部

状态归属问题

父组件可以将状态传入组件内部

如果这种状态在两个组件都有使用，就放在父组件

状态归属于两个节点向上寻找最近的父节点 这是状态不合理上升

状态如何改变

js中函数可以当成变量传递

直接把函数向下传递

react是单向数据流，只能由父组件向下传递

组件设计

1.组件声明了状态和UI的映射（输入一个状态反映一个UI）

2.组件内部的State状态，外部的接口传入状态

3.组件可以由其他组件组合

1.组件内部拥有私有状态State

2.组件接受外部的Props状态提供复用性

3.根据当前的State,Props返回一个UI

生命周期

显示到UI上

挂载 卸载 登录状态改变

3.react(hooks)的写法

4.react的写法

1.jsx不符合js标准语法

2.返回时jsx发生改变时如何更新dom

3.状态更新时，要重新触发render函数

virtual dom

虚拟dom是一种用于和真实DOM同步，而在js内存中维护一个对象 ，它具有和dom类似的树状结构，并和dom可以建立一一对应的关系

diffing（递归）
计算父组件和自组件的状态变化问题

求出之后再render 就改变了真实的dom

render函数本身执行要快 diff计算速度要快

how to diff

完美的最小diff算法，需要O（n^3）的复杂度

牺牲理论最小diff，换取时间，得到o(n)复杂度的算法

不类型的元素 替换

同类型dom元素 更新

同类型的组件元素 递归

react状态管理库

状态上升堆积根节点，不好使用

那么我们将状态抽离到UI外部进行统一管理，就没有堆积的问题了

需要共享的，应用层级别的就放在状态管理库内

什么需要放在状态管理库

如果说这种状态在使用特别多就放里面

一些推荐的状态管理库

redus xsate modx recoil

2.状态机

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

（比如红绿灯，每次转化一次，会迁移其他的状态）

测试实战

modern.js

next.js

blitz