课程简介
课程介绍 本节课程面向对于 React 知识有一定了解的同学，稍微深层次的介绍了下 React 的特性和更新流程。对于最近比较火的 Hook 也有了对比和介绍。并结合了较多具体常见的场景案例对 React 的基础知识进行了巩固介绍。 课程重点
- React 简介与特性
- React 更新流程
- class 组件和类组件
- hook 规则
- 常见 API 讲解
- 业务场景案例
01 React 简介与特性
1特点：
声明式 组件化 跨平台编写
2哲学Thinking In React
React 是用JavaScript 构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和Instagram 上表现优秀。 等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
2.1等待资源加载
一次请求太多资源? React.Lazy 网络请求慢? React.Suspense 资源加载失败? ErrorBoundary
2.2浏览器线程执行
JS执行 √异步更新 浏览器计算样式布局 √时间切片 UI绘制 √React Fiber
2.3更新流程
Scheduler(调度器)
维护时间切片(类似requestldlleCallback)
与浏览器任务调度
优先级调度
Reconciler (协调器)
将JSX转化为Fiber
Fiber树对比(双缓存)
确定本次更新的Fiber
Renderer(渲染器)
渲染器用于管理一棵 React树,使其根据底层平台进行不同的调用。
2.4优缺点
优点 缺点 快速响应:Fiber ◎大型应用需要配套学习状态管理、路由工具 组件化:复用性强 ◎不适合小型应用，需要用babel处理 声明式编程 跨平台:只需修改渲染器
02 React 基础温故知新
1 用React开发Web应用
2组件
2.1 Class 类 组件
继承＋构造函数 this 生命周期 render方法
class Demo1 extends React.Component{
constructor(props) {
super(props);
this.state = { date: new Date( ) };
}
timerID = null;
tick() {
this.setState({
date: new Date(),
});
}
componentDidMount() {
this.timerID = setInterval(() => this.tick()，1000);
}
componentwillUnmount() {
clearInterval(this.timerID);
}
render() {
return (
<div>
<h1>Hello,world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
2.2 函数式组件
没有生命周期 借助 Hook return JSX
function Demo1withHook( ) {
const [date, setDate] = useState<Date>(new Date());
const timerID =useRef<any>(null);
const tick = () => setDate(new Date( ) );
useEffect(() => {
timerID.current = setInterval(tick,1000) ;
return () => {
clearInterval(timerID.current);;
};
});
return (
<div>
<h1>Hello，React Hook!</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
) ;
}
2.3 函数式 相较于 Class 的优点
代码量骤减，组件干净清爽。 没有复杂的生命周期。 支持自定义 hook，逻辑复用方便
2.4 组件 和 Hook 的关系
我们将 UI 拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子。 hook 贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks 更贴切于电子
3 Hook 规则原理
3.1只能在最顶层使用Hook
React 怎么知道哪个 state 对应哪个 useState? 答案是 React 靠的是 Hook 调用的顺序
3.2只能在React 函数中调用Hook
在 React 函数组件中 或自定义 Hook 中调用 自定义 Hook 必须以 use 开头 Hook 中的 state 是完全隔离的
