类组件是扩展自 React.Component 的 ES6 类。它们允许我们通过状态管理和生命周期方法来处理复杂的 UI 逻辑。
- 在 Hooks 出现之前，用于有状态组件。
- 支持挂载、更新和卸载的生命周期方法。
React 类组件中的 render() 方法会返回描述应用程序 UI 的 JSX 元素。
让我们来看一个 React 中简单的类组件示例
JavaScript
CODEBLOCK_11867e28
!React-class-componentReact Class Components
现在我们的 React 应用程序拥有一个名为 App 的组件，它返回一个
元素。
要在应用程序中使用这个组件，我们可以使用类似于普通 HTML 的语法：
**示例：**
在 "root" 元素中渲染 App 组件：
`const root = ReactDOM.createRoot(document.getElementById(‘root‘));`
`root.render();`
React 类组件的结构
一个典型的 React 类组件由以下几个部分组成：
- 类声明： 组件被声明为一个继承自 React.Component 的类。这种继承使得该类能够访问 React 的方法和属性。
C++
CODEBLOCK_5956266b
- 构造函数： constructor() 方法用于初始化组件的状态并绑定事件处理器。这是可选的，但如果使用它，必须调用 super(props) 来初始化父 Component 类。
C++
CODEBLOCK_c0bc92a1
- 渲染方法： render() 方法是类组件中唯一必须的方法。它返回代表 UI 结构的 JSX。每当 state 或 props 发生变化时，render() 方法都会被再次调用。
C++
CODEBLOCK_f59d8b07
- 状态： 类组件可以使用 this.state 属性来管理它们自己的内部状态。State 是可变的，用于存储随时间变化的值，例如用户输入或 API 响应。
C++
CODEBLOCK_fb4f10de
- 事件处理器： 事件处理器 通常是类中的方法。它们用于处理用户交互，如点击、表单提交等。这些方法经常使用 this.setState() 来更新组件的状态。
C++
CODEBLOCK_988f5ef1
- 类组件中的 Props： Props 允许数据从父组件流向子组件。我们可以通过 this.props 访问它们。Props 不能由组件本身更改；它们由父组件控制。
JavaScript
CODEBLOCK_0449fea4