React 简介与特性
React：用于构建用户界面的JavaScript库
React特点：
- 声明式
- 组件化
- 跨平台编写
Thinking in React React是用JavaScript构建快速响应的大型web应用程序的首选方案之一。 等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
等待资源加载
- 一次请求太多资源？
- 网络请求慢？
- 资源加载失败？
Lazy&Suspense
<Tabs activeTab={activeKey} onChange={setActiveKey}>
{routes.map((item)=>{
const Component = React.lazy(()=>import(`./${item.key}`));
const RenderComponent = (
<Suspense fallback={"资源加载中..."}>
<Component />
</Suspense>
);
return (
<Tabs.TabPane key={item.key} title={item.name}>
{RenderComponent}
</Tabs.TabPane>
);
})}
</Tabs>
ErrorBoundary
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {hasError: false};
}
static getDerivedStateFromError() {
return {hasError : true};
}
componentDidCatch(error, errorInfo) {
logger.error(error, errorInfo);
}
render() {
if(this.state.hasError) {
return(<Empty description="抱歉，出错了！" />);
}
return this.props.children;
}
}
浏览器线程执行
- JS执行
- 浏览器计算样式布局
- UI绘制
调度器（Scheduler）
- 维护时间切片
- 与浏览器任务调度
- 优先级调度
协调器（Reconciler）
- 将 JSX 转化为 Fiber
- Fiber树对比（双缓存）
- 确定本次更新的 Fiber
渲染器（Renderer）
- 渲染器用于管理一棵 React 树，使其根据底层平台进行不同的调用。
总结
优点：
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
缺点：
- 大型应用需要配套学习 状态管理、路由工具
- 不适合小型应用，需要用babel处理
React 基础温故知新
用React开发web应用
架构
打包配置：JSX -> babel -> JS
加载优化和错误降级。
路由
React Router 向应用中快速的添加视图和数据流，保持页面和URL之间的同步。
UI
可复用UI -> 组件 -> 页面
可复用逻辑抽离成hook。
状态
多页面多组件共享信息 redux & context
React组件
- 数据：通过定义state操作视图，Mount时获取数据更新state，Ref保存与视图无直接关系的值，UnMount前清空Ref。
- 通信：props父子组件通信；context&redux组件信息共享。
- UI：数据决定视图，通过Ref获取到DOM。
- 性能：函数使用useCallback，值或者计算使用useMemo，组件包裹memo。
Class 组件
- 继承 + 构造函数
- this
- 生命周期：projects.wojtekmaj.pl/react-lifec…
- render方法
函数式组件
- 没有生命周期
- 借助 Hook
- return JSX
函数式 相比较 Class 的优点
- 代码量骤减，组件干净清爽。
- 没有复杂的生命周期。
- 支持自定义 hook，逻辑复用方便。
组件 和 Hook 的关系
- 我们将UI拆分成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。
- hook 贴近组件内部运行的各种逻辑概念，effect、state、context等等。hooks 更接近电子。
Hook 规则&原理
- 只能在最顶层使用 Hook（React靠 Hook 调用的顺序判断哪个state对应哪个useState）
- 只能在React函数中调用 Hook（自定义的 Hook 必须以 use 开头）
