一、React简介与特点（一）React简介 React：用于构建用户界面的javascript库。（二）React特点

声明式：React采用声明式编程，使代码更易于理解和调试。举例：React 的 JSX 语法。它允许你直接在 JavaScript 代码中编写类似 HTML 的标记，这样可以更直观地描述组件的结构和内容。

组件化：React使用组件化思想，将复杂的系统拆分成多个功能模块，便于重复利用。

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

（三）React哲学 React 用 JavaScript 构建快速响应和大型 Web 应用程序的首选方式之一。它在 Facebook 和 Instagram 上表现优秀。等待资源加载浏览器线程执行

3.1 React哲学_lazy和suspense React 解决等待资源加载的问题，可以使用 React.lazy 和 React.Suspense 来实现代码分割和按需加载。这样可以减少首次加载时需要下载的资源数量，从而提高页面加载速度。浏览器线程执行时，由于 JavaScript 是单线程的，所以在执行长时间运算时会阻塞页面渲染。React 通过异步更新和时间切片来解决这个问题。异步更新可以让 React 在空闲时间执行更新操作，而不会阻塞页面渲染。时间切片则可以将长时间运算拆分成多个小任务，在空闲时间依次执行，从而避免阻塞页面渲染。下面是一个使用 React.lazy 和 React.Suspense 的简单示例：

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() { return (

<Suspense fallback={

); }

3.2 React哲学_ErrorBoundary ErrorBoundary 是 React 16 中引入的一种方法，用于捕获和处理组件 UI 部分中发生的JS错误。因此，错误边界仅捕获生命周期方法、渲染方法和 useEffect 等钩子中发生的错误。要创建一个错误边界，我们只需创建一个类组件并定义一个状态变量来确定错误边界是否捕获了错误。我们的类组件还应至少具有三种方法：

一个名为 getDerivedStateFromError 的静态方法，用于更新错误边界的状态。一个 componentDidCatch 生命周期方法，用于在我们的错误边界捕获错误时执行操作，例如记录到错误记录服务。一个渲染方法，用于渲染我们的错误边界的子元素或在发生错误时渲染后备 UI。

下面是一个简单的错误边界示例：

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; }

static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; }

componentDidCatch(error, errorInfo) { // You can also log the error to an error reporting service logErrorToMyService(error, errorInfo); }

render() { if (this.state.hasError) { // You can render any custom fallback UI return

Something was wrong.

; }

return this.props.children;

} }

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

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

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

协调器负责比较新旧两棵树，并计算出需要进行的最小更改。这个过程称为协调（Reconciliation）。Reconciler 起作用的阶段我们称为 render 阶段，Renderer 起作用的阶段我们称为 commit 阶段。

3.4 React_优缺点优点： 1、快速响应：Fiber 2、组件化：复用性强 3、声明式导航 4、跨平台：只需修改渲染器缺点：需要使用 JSX 语法，学习曲线较陡峭。此外，React 不适合单独做一个完整的框架，做大型项目需要和其他框架组合使用。

二、React基础（一）用react开发web应用

架构：打包配置，JSX-babel-js，加载优化和错误降级。（其实我个人觉得这里的架构指的是Scheduler（调度），Reconciler（协调）和Renderer（渲染）。这些部分协同工作，使得 React 应用具有高效的性能和良好的可维护性。）

路由：在 React web 单页面应用中，页面级 UI 组件的展示和切换完全由路由控制，每一个路由都有对应的 URL 及路由信息，我们可以通过路由统一高效地管理我们的组件切换，保持 UI 与 URL 同步，保证应用的稳定性及友好体验。

UI： React 的内置 Hooks 非常适合 UI ，复用逻辑抽离成hook.

状态管理：多页面多组件间共享信息。redux & context。Context 是 React 的一个特性，它允许你在组件树中传递数据，而无需手动传递 props。这对于在多个层级中共享数据非常有用。

二）用react开发web应用_组件

数据：通过定义state操作视图，mount时获取数据更新state,ref保存与视图无关的值，unmount前清空ref.

通信：props父子通信，redux & context组件信息共享。

UI：数据决定视图，通过ref获取到DOM。

性能：函数使用usecallback值或者计算使用useMemo组件包裹memo。也可以在在组件卸载前进行清理操作，清理掉为 window 注册的全局事件以及定时器，防止组件卸载后继续执行影响应用性能。

React|青训营笔记

Something was wrong.