React简介与特性

用于构建用户界面的JavaScript库

声明式

声明式编程是告诉机器想要什么信息，机器就返回什么信息，偏重结果。

举例：React 的 JSX 语法。它允许你直接在 JavaScript 代码中编写类似 HTML 的标记，降低我们的学习成本。

那我们就需要再了解一下命令式编程

命令式编程是需要做什么事，机器就做什么事，偏重过程。

声明式编程

//声明式 直接赋值
var arr = [1,2,3,4,5];
var newArr = arr.map(val=>{
    return val**2
})

命令式编程

//命令式
let arr = [1,2,3,4,5];
let newArr = [];
let newArr = arr.forEach(val=>{
    let result = val**2
    newArr.push(result)
})

组件化

将多个功能模块拆分、重组的过程

便于后续的管理以及扩展

跨平台编写

React可以在多个平台上使用，包括Web、移动端和桌面应用程序。举例：使用 React Native 来构建 iOS 和 Android 应用程序。你可以使用相同的代码库来构建两个平台的应用程序，而不需要为每个平台单独编写代码。

• 优点

  • 快速响应: Fiber
  • 组件化:复用性强
  • 声明式编程
  • 跨平台: 只需修改渲染器【React-Native...】

• 缺点?

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

React基础

React 用 JavaScript 构建 快速响应和大型 Web 应用程序的首选方式之一。

影响Web性能的两大主要原因

• 等待资源加载时间

  • 一次请求太多资源
  • 网络请求慢
  • 资源加载失败

  解决方法：React.LazyReact.SuspenseErrorBoundary

• 大部分情况下浏览器单线程执行

  • JS执行
  • 浏览器计算样式布局
  • UI绘制

  解决方法：异步更新、时间切片、React Fiber

React 的更新流程包括调度器（Scheduler）、渲染器（Renderer）和协调器（Reconciler）  三个部分。

• 调度器（Scheduler）

负责确定何时执行工作，它可以将工作拆分为多个小块，以便在执行工作的同时保持浏览器的响应能力

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

• 渲染器（Renderer）

负责将 React 组件渲染到目标平台，例如 DOM、Canvas 或原生移动应用。不同的渲染器有不同的实现方式，但它们都遵循相同的模式。

- 将JSX转化为Fiber
- Fiber树对比(双缓存)
- 确定本次更新的Fiber

• 协调器（Reconciler）

负责比较新旧两棵树，并计算出需要进行的最小更改。这个过程称为协调（Reconciliation）。

Reconciler 起作用的阶段我们称为 render 阶段，

Renderer 起作用的阶段我们称为 commit 阶段。 - 渲染器用于管理一棵 React 树,使其根据底层平台进行不同的调用。

案例