React基础

57 阅读2分钟

React基础

一、React简介与特性

特点:声明式、组件化、跨平台编写

1.png

1、React哲学 (Thinking ln React)

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

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

案例分析:当点击的时候,再显示加载提示,再去加载相关资源,让用户不觉得那么突兀。

当网络断开可以显示降级组件

2.png

2、更新流程:

1、ScheduIer调度器

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

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

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

流程图:

3.png

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

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

4.png

二、React基础温故知新

1、Class组件

继承 + 构造函数 this 生命周期 render 方法

2、函数式组件

没有生命周期 借助Hook return JSX

函数式相较于 Class 的优点 代码量骤减 , 组件干净清爽 。 没有复杂的生命周期 。 支持自定义hook,逻辑复用方便 。

组件和 Hook 的关系 我们将 UI 拆成多个独立单元 , 这些单元组合可以构 成多种视图展示 , 这些独立单元就是组件 。 组件相 当于原子 。 hook 贴近组件内部运行的各种概念逻辑,effect 、 state、context等。hooks 更贴切于电子。

3、Hook规则&原理

6.png

4、React常见API及作用

7.png

5、React常见Hook及作用

8.png

三、业务场景案例

1、如何划分组件

_Layout

页面拆成4个部分

9.png

_Page

拆成5个部分

10.png

_component

11.png

2、组件间共享信息

12.png

13.png

3、组件性能优化

14.png