13、使用状态让 React 实现交互功能

使用状态让 React 实现交互功能

1. React 状态为何重要

状态对于创建任何类型的交互式应用程序都至关重要。如果应用程序没有任何状态，那就意味着它是完全静态的，一旦在浏览器中打开就无法更改。这对于博客文章或食谱来说可能没问题，但如果希望用户登录、更新、点击或以其他方式与应用程序交互以影响显示内容，那么应用程序就需要具有状态。

React 组件可以单独拥有状态，组件中保存状态使得整个 React 应用程序具有状态。虽然几乎所有 React 应用程序都是有状态的，但并非所有组件都有状态。应用程序中可能只有很少的有状态组件，但这些组件可以控制整个应用程序的状态，并在必要时更新所有无状态组件。大致估计，最终应用程序中可能最多只有三分之一的组件是有状态的，并且随着应用程序变得更大、更复杂，这个比例可能会进一步下降。

以下是有状态组件和无状态组件在组件树中的分布示意：

graph TD
    A[App - 有状态] --> B[Menu - 有状态]
    A --> C[Main - 有状态]
    B --> D[MenuItem1 - 无状态]
    B --> E[MenuItem2 - 无状态]
    C --> F[Page1 - 无状态]
    C --> G[Page2 - 无状态]
    A --> H[Footer - 无状态]

React 本身没有使整个应用程序具有状态的工具，React 应用程序仅定义为其组件的总和，因此要使应用程序具有状态，就必须使组件具有状态。