React基础 | 青训营笔记

21 阅读3分钟

课程简介

课程介绍 本节课程面向对于 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更新流程

image.png Scheduler(调度器) 维护时间切片(类似requestldlleCallback) 与浏览器任务调度 优先级调度 Reconciler (协调器) 将JSX转化为Fiber Fiber树对比(双缓存) 确定本次更新的Fiber Renderer(渲染器) 渲染器用于管理一棵 React树,使其根据底层平台进行不同的调用。

2.4优缺点

优点 缺点 快速响应:Fiber ◎大型应用需要配套学习状态管理、路由工具 组件化:复用性强 ◎不适合小型应用,需要用babel处理 声明式编程 跨平台:只需修改渲染器

02 React 基础温故知新

1 用React开发Web应用

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 是完全隔离的

4 过期闭包问题(待补

5 React 常见API及作用

03业务场景案例

04 课程总结与答疑