05 2024 档案
摘要：`useRef` 是 React 提供的一个 Hook，它可以用于在函数组件中存储可变值，并且在组件重新渲染时保持不变。`useRef` 的使用场景包括但不限于： 1. 访问 DOM 元素：可以使用 `useRef` 来获取并操作 DOM 元素，比如设置焦点、测量元素尺寸等。 2. 存储任意可变值：
阅读全文
摘要：useCallback 是 React 中的一个 Hook，用于优化性能并避免不必要的函数重新创建。 在 React 中，当一个组件重新渲染时，其内部的函数也会被重新创建。这可能会导致向子组件传递的回调函数发生变化，从而导致子组件不必要地重新渲染。为了避免这种情况，可以使用 useCallback
阅读全文
摘要：`useMemo` 是 React 提供的一个自定义 Hook，用于在渲染过程中执行一些昂贵的计算，并且仅在依赖项发生变化时重新计算。这有助于优化性能，避免在每次渲染时都重新计算相同的数值或对象。 在使用 `useMemo` 时，您可以传入一个函数和一个依赖项数组。`useMemo` 会在渲染过程中
阅读全文
摘要：import React, { createContext, useContext } from 'react'; // 创建一个上下文 const ThemeContext = createContext('light'); // 在某个父组件中提供上下文的值 function App() { r
阅读全文
摘要：当我们讨论嵌套泛型时，让我们以一个简单的示例来说明。假设我们有一个泛型类型 `Container`，它接受两个类型参数：`T` 和 `U`。其中 `T` 表示容器中的数据类型，而 `U` 则表示某种附加信息的类型。 ```typescript// 定义一个泛型类型 Containertype Con
阅读全文
摘要：类型断言（Type Assertion）是指在编程中显式地指定一个值的类型。在 TypeScript 中，类型断言可以让开发者告诉编译器某个值的确切类型，并且在编译时不进行类型检查或者进行更灵活的类型检查。 下面是一个简单的 TypeScript 类型断言的例子： // 定义一个变量 let som
阅读全文
摘要：useCallback 是 React 中的一个钩子函数，它用于创建一个稳定的回调函数，并且可以帮助优化性能。通常情况下，当父组件向子组件传递回调函数时，如果没有使用 useCallback，每次父组件重新渲染时，都会创建一个新的回调函数实例，这可能导致子组件不必要的重新渲染。使用 useCallb
阅读全文
摘要：当你在 React 中使用 `{children}` 时，它通常是用来传递一个函数作为子组件。这种模式通常被称为 "render props" 或 "function as child"。通过这种方式，父组件可以向子组件传递一个函数，并在子组件内部调用这个函数，并且还可以传递参数给这个函数。 下面是
阅读全文
摘要：useReducer 是 React 中的一个 Hook，用于管理组件的状态。它提供了一种更复杂的状态管理机制，适用于那些状态逻辑较为复杂、包含多个子值的情况。 与 useState 不同，useReducer 基于一个叫做 reducer 的函数来更新状态。Reducer 接收当前的状态和一个表示
阅读全文
摘要：React 中的 Hook 是 React 16.8 版本引入的一项特性，它让你在函数组件中使用状态(state)、生命周期方法、副作用等 React 的特性，而无需编写类组件。 使用 Hook 的主要目的是让函数组件具备了更多类组件的功能，同时让代码更加清晰、简洁，并且更容易复用逻辑。 一些常见的
阅读全文
摘要：JSX 是 JavaScript XML 的缩写，它是一种 JavaScript 的语法扩展。JSX 允许在 JavaScript 代码中编写类似于 XML 或 HTML 的标记结构，用来描述用户界面的结构。 在 React 应用中，开发者通常使用 JSX 来定义组件的结构。这样做的好处是，JSX
阅读全文
摘要：{ [key: string]: any } 是 TypeScript 中的一种类型注解，它描述了一个对象的类型。让我来解释一下这个类型注解，并举一个例子来说明它的用法。 在 TypeScript 中，{ [key: string]: any } 表示一个对象，其中键是字符串类型，而值可以是任意类型
阅读全文
摘要：Express.js 是一个流行的基于 Node.js 的 Web 应用程序框架，它简化了在 Node.js 上构建 Web 应用程序和 API 的过程。Express.js 提供了一组强大的功能和工具，使得创建高性能、可扩展的 Web 应用变得更加容易。 Express.js 的主要特点包括： 路
阅读全文
摘要：当使用 TypeScript 时，联合类型、交叉类型和映射类型是常见的高级类型概念，它们提供了强大的工具来处理各种复杂的类型情况。 ### 联合类型（Union Types）： 联合类型允许一个值属于多个类型之一。使用 `|` 符号来表示联合类型。例如： ```typescriptlet value
阅读全文
摘要：在 TypeScript 中，type 和 interface 都用于定义自定义类型，但它们有一些不同之处。主要区别在于以下几点： 语法差异： type：使用 type 关键字来定义类型别名，语法相对简洁，适合用于定义具体的类型结构或组合现有类型。 interface：使用 interface 关键
阅读全文
摘要：在 TypeScript 中，元组（Tuple）是一种特殊的数据结构，它允许你表示一个固定长度的、类型确定的数组。与普通的数组不同，元组中的每个位置可以拥有不同的数据类型。 元组的定义方式是将多个类型用逗号分隔，然后用方括号 [] 将它们括起来。例如： let myTuple: [string, n
阅读全文
摘要：enum ErrorShowType { SILENT = 0, WARN_MESSAGE = 1, ERROR_MESSAGE = 2, NOTIFICATION = 3, REDIRECT = 9, } 这是一个枚举类型（enum）的定义，名为ErrorShowType。枚举类型是一种数据类型，
阅读全文
摘要：在TypeScript中，declare 关键字用于创建类型声明，它告诉编译器某些变量已经存在，但是在编译时不会进行实际的生成代码操作。它通常用于描述外部的、已存在的 JavaScript 代码的结构和类型，或者用于定义全局变量、函数、类等，以便在 TypeScript 项目中进行类型检查和代码提示
阅读全文
摘要：联合类型是 TypeScript 中的一种类型，它表示一个值可以是多种类型之一。通过使用竖线 `|` 将多个类型连接在一起，就可以创建联合类型。 例如，考虑以下代码片段： ```typescriptlet myVariable: string | number;``` 这里的 `myVariable
阅读全文
摘要：proxy: proxy[REACT_APP_ENV as keyof typeof proxy], 这行代码看起来是在设置代理服务器的配置，通常在 React 应用中使用。让我逐步解释它： proxy 是一个对象，用于配置代理服务器的相关信息。 [REACT_APP_ENV as keyof ty
阅读全文
摘要：在 React 中，使用函数组件还是类组件取决于你的需求和个人偏好。在过去，类组件是主要的 React 组件形式，但是随着 React Hooks 的引入，函数组件也变得非常强大，两者之间的差异已经减小。以下是一些指导原则： 简单的 UI 组件：对于简单的 UI 组件，如按钮、图标、展示静态内容的组
阅读全文
摘要：class Student implements Person { constructor(public name: string, public age: number) {} greet() { console.log(`Hello, my name is ${this.name} and I
阅读全文
摘要：在TypeScript中，接口（Interface）是用于描述对象的形状（Shape）的一种抽象类型。通过接口，你可以定义对象应该包含哪些属性以及它们的类型。接口提供了一种方式来强制确保代码的一致性，并帮助编译器进行类型检查。 基本概念 接口定义了一个对象的属性名称、属性类型以及方法。当对象满足某个
阅读全文
摘要：TypeScript 的泛型（Generics）是一种在编写可复用、灵活且类型安全的代码时非常有用的特性。泛型允许你在编写函数、类或接口时使用参数化类型，这些参数化类型在使用时可以被具体指定。 基本概念 泛型允许你编写能够适用于各种类型的代码，而不是固定于一种特定类型。在函数、类或接口中，你可以定义
阅读全文
摘要：在 TypeScript 中，类型注解是一种用于指定变量、函数参数、函数返回值等处的类型信息的语法。通过类型注解，你可以告诉 TypeScript 编译器某个变量的类型是什么，以便在编译时进行类型检查，并提供更好的代码提示和错误检测。 类型注解通常使用冒号 : 后跟着一个类型来指定。例如： let
阅读全文
摘要：在 TypeScript 中，你可以使用接口（interface）来定义这种对象数组的类型。接口允许你描述对象的形状，从而确保你的数据结构符合预期。对于给定的数据 [{"name": "小明", "age": "18"}, {"name": "小东", "age": "10"}]，你可以这样声明一个
阅读全文
摘要：TypeScript支持多种类型，其中一些主要类型包括： 基本类型： number: 表示数字，可以是整数或浮点数。 string: 表示字符串。 boolean: 表示布尔值，即 true 或 false。 null 和 undefined: 分别表示 null 和 undefined。 symb
阅读全文
摘要：在 React 中，组件可以分为受控组件和非受控组件，它们之间的主要区别在于组件内部对数据的控制方式。 受控组件： 受控组件的值受 React 组件的状态（state）控制。 组件的值由 React 组件的 state 属性管理，并通过 props 将其传递给组件。 当用户与组件交互时，例如输入表单
阅读全文
摘要：CSR 指的是客户端渲染（Client-Side Rendering）。在客户端渲染中，整个页面的渲染过程发生在用户的浏览器上，而不是在服务器上。在传统的服务器端渲染（SSR）中，服务器负责将页面的 HTML 内容完全渲染好，并将其发送给浏览器。但在客户端渲染中，浏览器会下载页面的初始 HTML 结
阅读全文
