在 React 中，我们可以使用函数式组件和基于类的组件来构建 UI。尽管函数式组件已经越来越受欢迎，但是基于类的组件仍然是 React 中的一个重要概念。
基于类的组件介绍
基于类的组件是一个 JavaScript 类，它扩展了 React.Component 并实现了 render 方法。下面是一个基于类的组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-在上面的例子中，我们定义了一个名为 MyComponent 的类并且实现了它的 render 方法。render 方法返回一个 JSX 元素，这个元素将会作为组件的输出结果。
使用基于类的组件
使用基于类的组件与使用函数式组件类似。我们可以像下面这样使用 MyComponent 组件：
<MyComponent />
<MyComponent /> 将会渲染 MyComponent 组件并显示它的输出结果。
何时使用基于类的组件
如果你需要在组件中使用生命周期方法或者管理组件状态，则应该使用基于类的组件。
因为函数式组件没有生命周期方法和状态，所以当你需要这些功能时，就必须使用基于类的组件。
示例：基于类的计数器组件
下面是一个基于类的计数器组件的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
----------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
--------- ----------------------
------- ----------- -- ------------------------------------
------
--
-
-在上面的例子中，我们定义了一个名为 Counter 的类并且实现了它的 constructor、increment 和 render 方法。
constructor 方法会初始化组件的状态，并将其设置为 { count: 0 }。increment 方法会增加组件的状态计数器值。render 方法会渲染一个包含当前计数器值和一个增加计数器的按钮的 JSX 元素。
使用这个组件的方式与之前介绍的方式相同：
<Counter />
这个组件将会渲染一个包含计数器和一个增加计数器的按钮的 UI。
总结
基于类的组件是 React 中的一个重要概念，在需要生命周期方法或者管理状态的情况下应该使用它们。本文提供了一个简单的示例来演示如何创建一个基于类的计数器组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12241