主流框架
- react
- vue
- angular[NG]
主流思想都是不直接操作DOM，而是数据驱动视图。
- 直接操作DOM思想 操作DOM比较消耗性能 [主要原因就是:可能频繁的导致DOM重排(重绘)] 操作起来也相对麻烦 开发效率比较低 但是性能比较高
- 数据驱动思想 不直接操作DOM 改变了数据 数据进行修改视图 依靠底层 建立了虚拟DOM=>真实DOM渲染的体系 有效避免了DOM 频繁的 重绘/重排 开发效率更高 性能不一定会更高
React使用的是MVC体系,Vue使用的是MVVM模型
[NG]两个体系不是很明确
- MVC 纯单向数据层 Model 数据层 View 视图层 Controller 控制层 model==(数据改变视图)==>view==(用户进行系列的人机交互)==>controller ==(基于一些交互逻辑去修改数据)==>model 循环
- MVVM 可以双向通过v-m修改 Model 数据层 View 视图层 View-Model 数据/视图监听层 model=<==>view-model<===>view
react中的属性及函数
hooks函数组件
react ^16.8.0版本后开始出现并成为主流。
hook函数必须放在函数组件上下文中
函数组件是每一次渲染（或更新），都是把函数重新执行一遍，每一次执行都会产生一个新的'私有上下文' 内部的代码也需要重新执行一边 涉及的函数需要重新的构建 「这些函数的作用域（函数执行的上级上下文），是每一次执行函数组件产生的闭包」
类组件
创建一个类，并继承React.Component/PureComponent，基于render返回JSX视图 类组件是动态组件
-
具备属性及规则校验
-
具备状态，修改状态可以控制视图更新
- setState
- forceUpdate
-
具备周期函数
- 严格模式下，一些不安全的周期函数是禁止使用的
一个类组件的生命周期包含，从挂载组件到首次渲染组件，再到更新组件，到最后的卸载组件。
