React是一个用于构建用户界面的 JavaScript 库- 可以通过组件化的方式构建 构建快速响应的大型
Web应用程序
React如何干的?
声明式
-
声明式 使用声明式的编写用户界面,代码可行方便调试
-
声明式渲染和命令式渲染
- 命令式渲染 命令我们的程序去做什么,程序就会跟着你的命令去一步一步执行
- 声明式渲染 我们只需要告诉程序我们想要什么效果，其他的交给程序来做
组件化
- 组件化 把页面拆分为一个个组件，方便视图的拆分和复用，还可以做到高内聚和低耦合
JSX
- JSX是一个
JavaScript的语法扩展,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式 - JSX其实是
React.createElement的语法糖
Virtual DOM的理解
React.createElement函数所返回的就是一个虚拟DOM- 虚拟DOM就是一个描述真实DOM的纯JS对象
优点
- 处理了浏览器兼容性问题，避免用户操作真实DOM，那么又麻烦又容易出错
- 内容经过了XSS处理，可以防范XSS攻击
- 容易实现跨平台开发Android、iOS、VR应用
- 更新的时候可以实现差异化更新，减少更新DOM的操作
缺点
- 虚拟DOM需要消耗额外的内存
- 首次渲染其实并不一定会更快
函数组件和类组件的相同点和不同点
相同点
- 它们都可以接收属性并且返回React元素
不同点
- 编程思想不同: 类组件需要创建实例，是基于面向对象的方式编程，而函数式组件不需要创建实例，接收输入，返回输出，是基于函数式编程的思路来编写的
- 内存占用：类组件需要创建并保存实例，会占用一定内存，函数组件不需要创建实例，可以节约内存占用
- 捕获特性：函数组件具有值捕获特性
- 可测试性: 函数式组件更方便编写单元测试
- 状态: 类组件有自己的实例，可以定义状态，而且可以修改状态更新组件，函数式组件以前没有状态，现在可以使用useState使用状态
- 生命周期: 类组件有自己完整的生命周期，可以在生命周期内编写逻辑，函数组件以前没有生命周期，现在可以使用useEffect实现类似生命周期的功能
- 逻辑复用: 类组件可以通过继承实现逻辑的复用，但官方推荐组件优于继承，函数组件可以通过自定义Hooks实现逻辑的复用
- 跳过更新: 类组件可以通过
shouldComponentUpdate和PureComponent来跳过更新，而函数式组件可以使用React.memo来跳过更新 - 发展前景: 未来函数式组件将会成为主流，因为它可以更好的屏蔽this问题、规范和复用逻辑、更好的适合时间分片和并发渲染
