ReactJS 中基于状态/类的组件是什么？
React 基于类的组件：这些是大多数使用 ReactJS 构建的现代 Web 应用程序的基础。这些组件是简单的类（由向应用程序添加功能的多个函数组成）。所有基于类的组件都是 ReactJS 的 Component 类的子类。一旦声明了一个组件，它就可以在其他组件中使用。
创建 React 应用程序：
第 1 步：使用以下命令执行 Create react app。
npx create-react-app foldername第 2 步：通过执行以下命令将目录更改为该文件夹：
cd foldername项目结构：它将如下所示。
示例 1：演示创建基于类的组件的程序。
App.js
import React from "react";
class App extends React.Component {
render() {
return Welcome to GeeksForGeeks
;
}
}
export default App;App.js
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { change: true };
}
render() {
return (
{this.state.change ? (
Welcome to GeeksforGeeks
) : (
A Computer Science Portal for Geeks
)}
);
}
}
export default App;App.js
import React from "react";
class Name extends React.Component{
render() {
return(
{this.props.data}
)
}
}
class PropsExample extends React.Component {
constructor(props) {
super(props);
this.state = { change: true };
}
render() {
return (
{this.state.change ? (
运行应用程序的步骤：打开终端并键入以下命令。
npm start输出：
类组件中的状态：基于类的组件区别于功能组件的主要特征是它们可以访问指示组件当前行为和外观的状态。状态是 React 组件类的一个实例，可以定义为一组可观察属性的对象，这些属性控制组件的行为。换句话说，组件的状态是一个对象，它包含一些可能在组件的生命周期内发生变化的信息。例如，让我们想想我们在本文中创建的时钟，我们每秒显式调用 render() 方法，但 React 提供了一种更好的方法来实现相同的结果，那就是使用 State，存储作为组件状态成员的时间。我们将在本文后面更详细地研究这一点。可以通过调用 setState()函数来修改此状态。可以使用 setState()函数一次修改一个或多个定义为状态一部分的变量、数组或对象。
示例 2：演示在基于类的组件中使用状态和道具的程序。打开 App.js 文件并将代码替换为以下代码。
应用程序.js
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { change: true };
}
render() {
return (
{this.state.change ? (
Welcome to GeeksforGeeks
) : (
A Computer Science Portal for Geeks
)}
);
}
}
export default App;
输出：
类组件中的 Props：借助 props 将数据传递给其他组件。 Props 对 ReactJS 中的所有组件的工作方式类似，无论它们是基于类的还是函数式的。道具总是从父组件传递到子组件。 ReactJS 通常不允许组件修改自己的 props。修改 props 的唯一方法是更改从父组件传递到子组件的 props。这通常通过传递对父组件中的函数的引用来完成，这会更改传递给子组件的道具。我们可以使用上述语法从组件的类中访问任何道具。 “this.props”是一种存储所有组件道具的全局对象。 propName ，即 props 的名称是该对象的键。
示例 3：演示在基于类的组件中使用道具的程序。打开 App.js 文件并将代码替换为以下代码。
应用程序.js
import React from "react";
class Name extends React.Component{
render() {
return(
{this.props.data}
)
}
}
class PropsExample extends React.Component {
constructor(props) {
super(props);
this.state = { change: true };
}
render() {
return (
{this.state.change ? (
输出：
