React 规则

• 组件和 Hooks 必须是纯净的
• React 调用组件和 Hooks
• Hooks 规则

---

本节介绍编写惯用 React 代码所需遵循的规则。编写惯用 React 代码可以帮助您编写组织良好、安全且可组合的应用程序。这些属性使您的应用程序更能适应变化，并使与其他开发人员、库和工具协同工作更容易。

这些规则被称为 React 规则。它们是规则——而不仅仅是指南——因为如果违反了这些规则，您的应用程序很可能存在错误。您的代码也会变得不规范，更难理解和推理。

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

---

组件和 Hooks 必须是纯净的

组件和 Hooks 的纯净性 是 React 的一个关键规则，它使您的应用程序可预测、易于调试，并允许 React 自动优化您的代码。

• 组件必须是幂等的 – React 组件假定总是相对于其输入（props、状态和上下文）返回相同的输出。
• 副作用必须在渲染之外运行 – 副作用不应在渲染中运行，因为 React 可以多次渲染组件以创造最佳的用户体验。
• Props 和状态是不可变的 – 对于单个渲染，组件的 props 和状态是不可变的快照。切勿直接更改它们。
• Hooks 的返回值和参数是不可变的 – 一旦将值传递给 Hook，就不应修改它们。像 JSX 中的 props 一样，值传递给 Hook 后就会变得不可变。
• 传递给 JSX 后的值是不可变的 – 在 JSX 中使用值后，不要修改它们。在创建 JSX 之前移动突变。

---

React 调用组件和 Hooks

React 负责在必要时渲染组件和 hooks 以优化用户体验。 它是声明式的：您告诉 React 在组件的逻辑中渲染什么，React 将找出如何最好地将其显示给您的用户。

• 切勿直接调用组件函数 – 组件只能在 JSX 中使用。不要将它们作为常规函数调用。
• 切勿将 hooks 作为常规值传递 – hooks 只能在组件内部调用。切勿将其作为常规值传递。

---

Hooks 规则

Hooks 使用 JavaScript 函数定义，但它们表示一种特殊的可重用 UI 逻辑，对它们可以调用的位置有限制。使用它们时，需要遵循 Hooks 规则。

• 只能在顶层调用 Hooks – 不要在循环、条件或嵌套函数内调用 Hooks。而应始终在 React 函数的顶层，在任何提前返回之前使用 Hooks。
• 只能从 React 函数调用 Hooks – 不要从常规 JavaScript 函数调用 Hooks。