React的学习
1.React的历史与应用
应用
1.前端应用开发 如Fackebook网页
2.移动原生应用开发,如Instagram
3.结合Electron,进行桌面应用开发
历史
2010年 facebook 在其 php 生态中,引入了 xhp 框架,首次引入了组合式组件的思想,后来启发了 React 的设计
2011年 Jordan Walke 创造了 FaxJS,也就是后来的React原型
2012年 在 Facebook收购 Instagram 后,该 FaxJS 项目在内部得到使用,Jordan Walke基于 FaxJS 的经验正式创造了 React
2013年 React 正式开源,在2013 JSConf 上 Jordan Walke 介绍了这款全新的框架: React
2014年至今 生态大爆炸,各种围绕 React 的新工具/新框架不断涌现
2.React的设计思路
响应式与转换式系统:
响应式系统---监听事件消息驱动,例如 实时监控系统、UI界面
转换式系统---给定[输入]求解[输出],例如 编译器、数值计算
响应式编程:
1.状态更新,相应的数据自动更新
2.前端代码组件化,可复用,可封装
3.状态之间的相互依赖关系,只需申明即可,不用手动维护关系
组件化:
1.组件是组建的组合\原子的组合
2.组件内拥有状态,外部不可见
3.父组件可将状态传入组件内部
组件设计:
1.组件声明了状态和UI的映射 2.组件有 Props/State 两种状态 3."组件"可由其他组件拼装而成
生命周期:
1.Mounting 挂载时 2.Updating 更新时 3.Unmounting 销毁时
3.React(hooks)的写法
1.useEffect() 副作用 hock 一般只执行一次 2.useState() 更改状态 hock
4.React的实现
问题
1.JSX 不符合 JS 标准语法
2.返回的 JSX 发生改变时,如何更新 DOM
3.State/Props更新时,要重新触发 render 函数
解答
1.这个语法只是虚拟的,最终会进行转义最后还是会转义成JavaScript语法
2.可以使用 虚拟DOM树 虚拟DOM树和真实的DOM树会建立一一对应的关系,当虚拟DOM树发生改变时,React会确保真实的DOM也发生相应的改变
3.React 使用了 diff 算法,来查找改变的DOM节点
How Diff
完美的 diff 算法需要的时间复杂度为 O(n^3),而React牺牲了理论最小的 Diff,换取了时间,得到了 O(n)的时间复杂度
虚拟的DOM修改状态后,类型会发生改变
若真实的DOM和虚拟的DOM不同的类型会替换,然后会将类型不同的虚拟DOM子节点全部替换
若类型相同的DOM元素,会更新
若同类型的组件元素,会递归
5.React状态管理库
状态管理库是React的核心功能,它可以将数据保存到状态管理库中,这样就不用将组件内的状态的改变用函数的方式来改变了
但是并不是所有的组件都适合用这种方式保存状态,例如自己写的小组件,可以被别人使用,作为组件,不可能将数据都保存到状态管理库中,因该是封装度高的,所有数据都在组件内部的。还有有一些数据因该只是组件内可见的,如果到了状态管理库中,就将数据变得所有组件都可见了,这是不安全的
状态管理库推荐:
1.redux 2.xstate 3.mobx 4.recoil
状态机
状态机是状态管理库借鉴的思想,状态机由很多状态组成,每一个状态收到外部事件，会迁移到下一个状态
6.应用级框架科普
1.NEXT.JS框架 2.MODERN.JS框架 3.Blitz框架
