React 特点

声明式组件化跨平台编写

React 哲学

React 是用 JavaScript 构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和Instagram上表现优秀。

等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。

等待资源加载

一次请求太多资源 React.Lazy
网络请求慢 React.Suspense
资源加载失败 ErrorBoundary

浏览器线程执行

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

React 更新流程

Scheduler（调度器）

维护时间切片（类似requestIdleCallback）
与浏览器任务调度
优先级调度

Reconciler（协调器）

将JSX转化为Fiber
Fiber树对比（双缓存）
确定本次更新的Fiber

渲染器

渲染器用于管理一颗React树，使其根据底层平台进行不同的调用。

总结优缺点

优点

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

缺点

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

用React开发web应用

架构

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

通信

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

UI

数据决定视图
通过Ref获取到DOM

性能

函数使用userCallback
值或者计算使用useMemo
组件包裹memo

React组件

Class组件

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

函数式组件

没有生命周期
借助Hook
return JSX

函数式相比Class的优点

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

组件和Hook的关系

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

Hook规则 & 原理

只能在最顶层使用Hook

React怎么知道哪个state对应哪个useState？答案是React靠的是Hook调用的顺序。

只能在React函数中调用Hook

在React函数组件中或自定义Hook中调用
自定义Hook必须以use开头
Hook中的state是完全隔离的

Hook过期闭包问题

在JS中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。

React常见API及作用

API	作用
React.Component	类组件基类extends
React.PureComponent	未实现shouldComponentUpdarte()，内置了props和state浅层对比
React.memo	高阶组件，仅比较props变更
React.createElement	创建并返回React元素，不使用JSX场景
React.cloneElement	克隆并返回新React元素，并且可以为新元素添加额外props
React.Children.[Fn]	map遍历并返回；forEach仅遍历；count子组件数量；only是否只有一个子结点
React.createRef	创建一个ref，并附加到具体元素上，class组件中获取dom结构常用
React.forwardRef	转发ref或者与useImperativeHandler联合使用暴露方法
React.lazy	实现组件动态加载
React.Suspense	组件加载过程优雅降级

React 常见Hook及作用

to-do

具体场景案例