React 的规则

• 组件和钩子必须是纯的
• React 调用组件和钩子
• 钩子的规则

---

本节描述了编写惯用的 React 代码需要遵循的规则。编写惯用的 React 代码可以帮助你编写组织良好、安全且可组合的应用。这些属性使你的应用更能适应变化，并更容易与其他开发者、库和工具合作。

¥This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools.

这些规则被称为 React 规则。它们是规则，而不仅仅是指南，因为如果它们被打破，你的应用可能会出现错误。你的代码也会变得不惯用，更难以理解和推断。

¥These rules are known as the Rules of React. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about.

我们强烈建议将 严格模式 与 React 的 ESLint 插件 一起使用，以帮助你的代码库遵循 React 规则。通过遵循 React 规则，你将能够找到并解决这些错误并保持应用的可维护性。

¥We strongly recommend using Strict Mode alongside React’s ESLint plugin to help your codebase follow the Rules of React. By following the Rules of React, you’ll be able to find and address these bugs and keep your application maintainable.

---

组件和钩子必须是纯的

¥Components and Hooks must be pure

组件和钩子的纯度 是 React 的一条关键规则，它使你的应用可预测、易于调试，并允许 React 自动优化你的代码。

¥Purity in Components and Hooks is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.

• 组件必须是幂等的 - 假设 React 组件始终返回与其输入相同的输出 -属性、state 和 context。

  ¥Components must be idempotent – React components are assumed to always return the same output with respect to their inputs – props, state, and context.

• 副作用必须在渲染之外运行 - 副作用不应在渲染中运行，因为 React 可以多次渲染组件以创造最佳的用户体验。

  ¥Side effects must run outside of render – Side effects should not run in render, as React can render components multiple times to create the best possible user experience.

• 属性和状态是不可变的 - 组件的属性和状态是相对于单个渲染的不可变快照。切勿直接突变它们。

  ¥Props and state are immutable – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly.

• 钩子的返回值和参数是不可变的 - 一旦值被传递给 Hook，你就不应该修改它们。就像 JSX 中的属性一样，值在传递给钩子时变得不可变。

  ¥Return values and arguments to Hooks are immutable – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook.

• 值在传递给 JSX 后是不可变的 - 在 JSX 中使用值后，请勿更改值。在创建 JSX 之前移动突变。

  ¥Values are immutable after being passed to JSX – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created.

---

React 调用组件和钩子

¥React calls Components and Hooks

React 负责在必要时渲染组件和钩子以优化用户体验。 它是声明性的：你告诉 React 在组件的逻辑中渲染什么，React 会找出如何最好地向用户显示它。

¥React is responsible for rendering components and hooks when necessary to optimize the user experience. It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.

• 切勿直接调用组件函数 - 组件只能在 JSX 中使用。不要将它们作为常规函数调用。

  ¥Never call component functions directly – Components should only be used in JSX. Don’t call them as regular functions.

• 切勿将钩子作为常规值传递 - 钩子只能在组件内部调用。切勿将其作为常规值传递。

  ¥Never pass around hooks as regular values – Hooks should only be called inside of components. Never pass it around as a regular value.

---

钩子的规则

¥Rules of Hooks

钩子是使用 JavaScript 函数定义的，但它们代表一种特殊类型的可重用 UI 逻辑，并且对调用位置有限制。使用时需遵循 钩子的规则。

¥Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. You need to follow the Rules of Hooks when using them.

• 只在顶层调用钩子 - 不要在循环、条件或嵌套函数内调用 Hook。相反，在任何早期返回之前，始终在 React 函数的顶层使用钩子。

  ¥Only call Hooks at the top level – Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.

• 仅从 React 函数调用钩子 - 不要从常规 JavaScript 函数中调用 Hook。

  ¥Only call Hooks from React functions – Don’t call Hooks from regular JavaScript functions.