u010194271的博客

├── .umirc.ts // 与 config/config 文件 2 选一 ，对webpack进行配置。直接把.umirc.ts复制过来的，route中的组件都不需要写导入，非运行时配置（webpack配置）。│ ├── services // 推荐目录。│ ├── utils // 推荐目录。├── public//静态资源。├── .env //环境变量。

return (这是一个 React 组件，作为 InfoContext 的 Provider，用来为组件树中的所有后代组件提供共享的上下文数据。初始化 age 为 18，并提供一个 setAge 函数来更新 age 的值。addAge：定义了一个函数，使用 setAge 来将 age 增加 1000。当这个函数被调用时，它会修改 age，并触发组件重新渲染。

暂停web应用，点击Build，生成dist目录，目录下有html。

React学习文档

使用 React.memo 当你想要优化子组件的渲染性能时，特别是在传递给子组件的 props 没有变化时。使用 useMemo 当你有一个计算开销大的值，并且这个值的计算依赖于某些特定的 props 或 state 时。

平移变换之所以通过矩阵运算而不是简单的加法运算，主要是因为矩阵运算提供了一种统一的、通用的方式来处理图形变换，尤其是在处理复杂的变换时，矩阵运算能够将平移、旋转、缩放等变换统一起来，简化了变换的组合和应用矩阵运算不仅能够处理平移变换，还能将图形变换统一起来，成为计算机图形学中的一个核心工具。计算机的底层原理确实深深根植于数学的世界，尤其是 离散数学、布尔代数、线性代数、概率论、信息论 等数学分支。无论是硬件设计、操作系统的工作原理，还是现代的人工智能、机器学习和大数据分析，背后都离不开数学的支持。

在 React 中，副作用是指那些与组件的渲染无关的操作。数据获取（如 API 请求）事件监听（如添加和移除事件监听器）手动 DOM 操作（如使用第三方库）清理操作（如清除定时器）useEffect 用于处理副作用，允许你在组件的不同生命周期阶段执行代码。它在组件渲染后异步执行，并可通过依赖数组控制执行频率。清理函数可以确保在组件卸载时清除不必要的副作用。

useState 允许在函数组件中管理状态，通过返回当前状态和更新函数的方式实现。状态更新是异步的，并且可以通过函数式更新避免旧值问题。React 会优化状态更新，合并多次更新以提高性能。

react 官网渲染讲解：https://zh-hans.react.dev/learn/render-and-commitReact 将状态更新标记为需要更新，但并不会立即执行。这是为了优化性能，通过批量处理状态更新和减少渲染次数来提升应用的响应速度。当你调用 setVisible 时，React 并不会立刻更新状态并重新渲染组件。相反，React 会将状态更新放入一个队列中，并在下一个事件循环（即下一次渲染周期）中处理这些更新。这意味着，在调用 setVisible 后，当前组件的渲染仍然会使用旧的状

立即调用的函数表达式（IIFE），它会立即执行并返回一个空对象解析。

官方文档。

现代前端开发工具和构建工具（如 Webpack、Babel、ESLint、Prettier 等）是基于 Node.js 的，是因为这些工具和库本质上依赖于 Node.js 作为运行时环境 来执行构建、转译、打包、代码检查等任务。虽然这些工具的目标是处理前端代码，但它们的实现和执行是在 Node.js 环境中，并且使用 Node.js 的一些特性来执行它们的功能。

JavaScript 中有八种基本的数据类型。number 用于任何类型的数字：整数或浮点数，在 ±(253-1) 范围内的整数。bigint 用于任意长度的整数。string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。boolean 用于 true 和 false。null 用于未知的值 —— 只有一个 null 值的独立类型。undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。symbol 用于唯一的标识符。

productList.length 返回 productList 数组的长度（数字）。!!productList.length 将该长度转换为布尔值，通常用于检查数组是否为空（即 length > 0）。

在 React 中，虚拟 DOM（Virtual DOM）是 React 用来高效更新 UI 的核心机制，它通过对比前后两次虚拟 DOM 树，确定哪些部分需要更新，以减少直接操作真实 DOM 的开销。而 “provider” 一般指的是 React 中的 Context Provider。“虚拟 DOM 顶部有很多 provider”，可能是指在 React 应用中，多个 Context Provider 被放置在组件树的顶部，并且它们的作用是为下层组件提供共享的状态或功能。

块级元素行内元素divspanpah1-h6strongul,olli,emtablei,b,ublockquoteimgbrcodenavlabelaside。

div：用于创建大块内容的布局或容器，适合组织页面结构。span：用于在行内对小部分内容进行样式处理或包裹，不改变布局。

结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。

当你给 Space 组件加上 block 属性时，它会表现得像块级元素一样，自动填满父容器的宽度。如果没有 block 属性，Space 的宽度只会根据内容调整，不会自动撑满父容器的宽度。这是有助于在某些布局中让元素占满一行或特定的区域，尤其是表单元素或按钮组在垂直排列时使用。

在 TypeScript 中，type 关键字用于定义类型别名，即为一个类型创建新的名字。这种类型别名可以用于基本类型、联合类型、交叉类型、对象类型、函数类型等多种类型结构。

React 中的“Hook”之所以得名，是因为它能让你“钩住”函数组件中的状态管理、生命周期和其他特性，类似于编程中常见的“钩子”概念。通过 Hooks，你可以在 React 中更灵活地插入逻辑、管理状态，提供了一种简洁、模块化的方式来构建复杂应用。

1、默认情况下，返回到之前的页面会重新挂载组件，即重新执行组件的生命周期或钩子函数。2、避免组件重新挂载的方法：使用 React Router 的嵌套路由或布局组件。通过 localStorage 或 sessionStorage 缓存状态。使用 useMemo、useRef 缓存部分计算结果。使用 React Query 等工具缓存数据。使用 react-activation 等插件保持页面不重新挂载。

React 17版本之前React 17版本之后// 如果return null 则依然以原来的规则更新state，否则会锁定更新state。

为函数的入参与输出做详细注释，便于使用者一目了然功能与所需参数;如无必要，无增注释；1、注释符与注释内容之间加一个空格。2、注释行与上方代码间加一个空行。可配置自动生成头部信息。提高可读性和可维护性。多行注释： /**/

new Date(2024, 9, 27)new Date(‘2024- 9-27’)

这行代码的功能是将 ./components/button 文件中的默认导出作为 Button 导出，使其他模块能够通过 import { Button } from ‘…@ 被用作指向项目源代码（通常是 src 目录）的别名,需要配置。

useImperativeHandle 是一个强大的 Hook，使得在 React 组件中更灵活地控制组件的实例方法变得可能。它可以让你清晰地定义哪些方法和属性应暴露给父组件，从而实现更好的封装和重用。

在组件加载时异步获取基本信息和电话号。在加载过程中更新状态以指示加载状态。处理获取的数据并重置表单的值。这种处理方式使得- 组件在加载数据时能够有效地管理状态和用户界面。

Hooks 被称为“钩子”是因为它们提供了一种在函数组件中“钩住” React 的状态管理、生命周期等功能的方式。这种机制让函数组件不仅可以处理视图逻辑，还可以处理其他复杂的功能和副作用，简化了组件开发的过程。通过 Hooks，React 提供了一种更直观和灵活的方式来构建和管理组件逻辑。