Terms

React 中用到的术语¶

Component（组件）¶

React 中最基本的构建块，组件可以是类组件或函数组件，用于构建用户界面的不同部分。
The basic building blocks in React, which can be class components or functional components, used to build different parts of the user interface.

JSX¶

JavaScript XML，是一种语法扩展，允许你在 JavaScript 代码中使用类似 HTML 的语法来描述 UI。
JavaScript XML, a syntax extension that allows you to use HTML-like syntax in JavaScript code to describe the UI.

Props（属性）¶

组件的输入参数，用于从父组件向子组件传递数据。
Input parameters of a component used to pass data from a parent component to a child component.

State（状态）¶

组件内部的状态，用于管理组件的动态数据，状态的变化会触发组件的重新渲染。
The internal state of a component used to manage dynamic data; changes in state trigger the component to re-render.

Lifecycle Methods（生命周期方法）¶

类组件中用来控制组件在不同阶段（挂载、更新、卸载）执行特定逻辑的方法，比如 componentDidMount、componentDidUpdate、componentWillUnmount 等。
Methods in class components used to control the execution of specific logic at different stages (mounting, updating, unmounting) of a component's life cycle, such as componentDidMount, componentDidUpdate, componentWillUnmount, etc.

Hooks（钩子）¶

React 16.8 引入的特性，允许在函数组件中使用状态和其他 React 特性，常用的钩子有 useState、useEffect、useContext 等。
A feature introduced in React 16.8 that allows the use of state and other React features in functional components. Common hooks include useState, useEffect, useContext, etc.

Virtual DOM（虚拟 DOM）¶

React 用来优化 UI 渲染的一种技术，通过在内存中维护一个虚拟的 DOM 树，当状态或属性变化时，React 会对比虚拟 DOM 和实际 DOM 的差异，然后只更新需要改变的部分。
A technique used by React to optimize UI rendering by maintaining a virtual DOM tree in memory. When state or props change, React compares the virtual DOM with the actual DOM and only updates the parts that need to be changed.

Render（渲染）¶

React 的核心概念之一，指的是将组件的 JSX 转换成实际的 DOM 元素并插入页面。
One of the core concepts of React, referring to the process of converting a component's JSX into actual DOM elements and inserting them into the page.

Reconciliation（调和）¶

React 更新 DOM 的过程，指的是 React 找到虚拟 DOM 和实际 DOM 之间的差异，并且只更新那些需要改变的部分。
The process React uses to update the DOM by finding differences between the virtual DOM and the actual DOM and only updating the parts that need to be changed.

Keys（键值）¶

在渲染列表时，React 使用 key 属性来标识哪些元素发生了变化，从而优化渲染性能。
When rendering lists, React uses the key attribute to identify which elements have changed, thereby optimizing rendering performance.

Context（上下文）¶

用于在组件树中传递数据而无需手动传递 props，适合用于全局状态管理或跨越多层组件传递数据的场景。
Used to pass data through the component tree without manually passing props, suitable for global state management or scenarios where data needs to be passed across multiple layers of components.

Refs（引用）¶

提供了一种访问 DOM 节点或 React 元素的方式，常用于处理需要直接操作 DOM 的场景。
Provides a way to access DOM nodes or React elements, commonly used in scenarios where direct manipulation of the DOM is required.

Fragments（片段）¶

允许返回多个元素而不需要增加额外的 DOM 元素包裹，可以使用 <React.Fragment> 或简写 <>。
Allows returning multiple elements without adding extra DOM elements. Can be used with <React.Fragment> or the shorthand <>.

Higher-Order Components (HOC)（高阶组件）¶

一种复用组件逻辑的技术，本质上是一个函数，接收一个组件并返回一个新组件。
A technique for reusing component logic, essentially a function that takes a component and returns a new component.

Portal（传送门）¶

提供了一种将子节点渲染到父组件以外的 DOM 节点中的方式。
Provides a way to render children into a DOM node outside of the parent component.

Suspense¶

用于处理异步操作，比如在数据加载前显示一个占位符，通常和 React.lazy 结合使用来实现代码分割。
Used to handle asynchronous operations, such as displaying a placeholder⬤