React 特性与简介

React用于构建用户界面的JavaScript库，着重点在于页面和视图

特点

• 声明式：只需要声明结果
• 组件化：把页面拆分成多个组件
• 跨平台编写*：通过渲染器实现跨平台编写

React哲学

React使用JavaScript构建快速响应的大型Web应用程序的首选方式之一。

先来了解下什么影响web性能：一般来说等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因，而React有独到的方式来应对这些问题。

等待资源加载：

• 一次性请求过多资源 —— React.Lazy
• 网络请求慢 —— React.Suspense
• 资源加载失败 —— React.ErrorBoundary.

浏览器线程执行：

• JS执行 —— 异步更新
• 浏览器计算样式布局 —— 时间切片
• UI绘制 —— React Fiber

总结 优缺点

优点：

• 快速响应：Fiber
• 组件化：复用性强
• 声明式编程
• 跨平台：只需要修改渲染器

缺点： 大型应用需要配套学习状态管理，路由工具 不适合小型应用，需要用babel处理

React基础

用React开发web应用

架构：打包配置JSX->babel->JS，加载优化和错误降级

路由：React Router向应用中快速地添加视图和数据流，保持页面与URL间的同步

UI:可复用UI->组件->页面，可复用逻辑抽离成hook。

状态：多页面多组件共享信息，redux&context

用React开发web应用_组件

数据：通过定义state操作视图，Mount时获取数据更新state，Ref保存与视图无直接关系的值，unMount前清空Ref

通信：props父子组件通信，context&redux组件信息共享

UI：数据决定视图，通过Ref获取到DON

性能：函数使用useCallback，值或者计算使用useMemo，组件包裹memo

组件

Class组件

• 继承+构造函数
• this
• 生命周期
• render方法

函数式组件

• 没有生命周期
• 借助Hook
• return JSX

函数式相较于Class的优点：

• 代码量骤减，组件干净清爽
• 没有复杂的生命周期
• 支持自定义hook，逻辑复用方便

组件和Hook的关系：

• 我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。
• hook贴近组件内部运行的各种概念逻辑，effect，state，context等。hooks更贴切于电子。