React基础与实践 | 青训营笔记

53 阅读1分钟

React基础与实践 | 青训营笔记

1 React简介与特性

React
用于构建用户界面的JavaScript库

React特点

image.png

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

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

等待资源加载: 一次请求太多资源?网络请求慢? 资源加载失败?

浏览器线程执行: JS执行 浏览器计算样式布局 UI绘制

更新流程:

1.Scheduler (调度器) 维护时间切片(类似requestldleCallback)与浏览器任务调度 优先级调度

2.Reconciler (协调器) 将JSX转化为FiberFiber树对比(双缓存)确定本次更新的 Fiber

3.Renderer(渲染器)渲染器用于管理一棵 React 树,使其根据底层平台进行不同的调用。

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

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

2 React基础温故知新

image.png

image.png

Class 组件: 继承+构造函数 this 生命周期 render方法

函数式组件 没有生命周期借助Hook return JSX

image.png

Hook规则&原理

只能在React函数中调用Hook

在React函数组件中或自定义

Hook中调用自定义Hook必须以use开头

Hook中的state是完全隔离的

3 业务场景案例

image.png

4 课程总结与答疑

image.png