React基础
一、React简介与特性
特点:声明式、组件化、跨平台编写
1、React哲学 (Thinking ln React)
React 是用 JavaScript 构建快速响应的大型 We b 应用程序的首选方式之一 。 它在 Facebook 和 lnstagram 上表现优秀 。
等待资源加载时间和大部分情况下浏览器单线程执行是影响 web 性能的两大主要原因 。
案例分析:当点击的时候,再显示加载提示,再去加载相关资源,让用户不觉得那么突兀。
当网络断开可以显示降级组件
2、更新流程:
1、ScheduIer调度器
维护时间切片(类似 requestldleCallback) 与浏览器任务调度 优先级调度
2、ReconciIer协调器 将 JSX 转化为Fiber Fiber 树对比(双缓存) 确定本次更新的 Fiber
3、Renderer渲染器 渲染器用于管理一棵 React 树 , 使其根据底层平台进行不同的调用
流程图:
优点 快速响应 : Fiber 组件化 : 复用性强 声明式编程 跨平台 : 只需修改渲染器
缺点 大型应用需要配套学习状态管理、路由工具 不适合小型应用 , 需要用 babel 处理
二、React基础温故知新
1、Class组件
继承 + 构造函数 this 生命周期 render 方法
2、函数式组件
没有生命周期 借助Hook return JSX
函数式相较于 Class 的优点 代码量骤减 , 组件干净清爽 。 没有复杂的生命周期 。 支持自定义hook,逻辑复用方便 。
组件和 Hook 的关系 我们将 UI 拆成多个独立单元 , 这些单元组合可以构 成多种视图展示 , 这些独立单元就是组件 。 组件相 当于原子 。 hook 贴近组件内部运行的各种概念逻辑,effect 、 state、context等。hooks 更贴切于电子。
3、Hook规则&原理
4、React常见API及作用
5、React常见Hook及作用
三、业务场景案例
1、如何划分组件
_Layout
页面拆成4个部分
_Page
拆成5个部分
_component