React 规则

正如不同的编程语言有各自表达概念的方式一样，React 也有自己的习惯用法（或规则），用于以易于理解的方式表达模式，并生成高质量的应用程序。

要详细了解如何使用 React 表达 UI，我们建议阅读 React 思维模式。

本节介绍了编写规范 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 在组件的逻辑中渲染什么，React 会找出向用户显示它的最佳方式。

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