React基础与实践 | 青训营笔记
1 React简介与特性
React
用于构建用户界面的JavaScript库
React特点
React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和Instagram 上表现优秀。
等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因。
等待资源加载: 一次请求太多资源?网络请求慢? 资源加载失败?
浏览器线程执行: JS执行 浏览器计算样式布局 UI绘制
更新流程:
1.Scheduler (调度器) 维护时间切片(类似requestldleCallback)与浏览器任务调度 优先级调度
2.Reconciler (协调器) 将JSX转化为FiberFiber树对比(双缓存)确定本次更新的 Fiber
3.Renderer(渲染器)渲染器用于管理一棵 React 树,使其根据底层平台进行不同的调用。
优点: 快速响应:Fiber组件化:复用性强声明式编程 跨平台:只需修改渲染器
缺点: 大型应用需要配套学习状态管理、路由工具不适合小型应用,需要用babel处理
2 React基础温故知新
Class 组件: 继承+构造函数 this 生命周期 render方法
函数式组件 没有生命周期借助Hook return JSX
Hook规则&原理
只能在React函数中调用Hook
在React函数组件中或自定义
Hook中调用自定义Hook必须以use开头
Hook中的state是完全隔离的