基于 ReactJS 类的组件

基于 React类的组件是大多数使用 ReactJS 构建的现代 Web 应用程序的基础。这些组件是简单的类（由向应用程序添加功能的多个函数组成）。所有基于类的组件都是 ReactJS 的 Component 类的子类。

示例：演示如何创建基于类的组件的程序。创建一个 React 应用程序并将App.js编辑为：

文件名 - App.js：

javascript

import React from "react";
 
class App extends React.Component {
  render() {
    return 
GeeksForGeeks
;
  }
}
 
export default App;

输出：

一旦声明了一个组件，它就可以在其他组件中使用。演示在其他组件中使用基于类的组件的程序。

示例：打开App.js文件并将代码替换为以下代码。

javascript

import React from "react";
 
class Sample extends React.Component {
  render() {
    return 
A Computer Science Portal For Geeks
;
  }
}
 
class App extends React.Component {
  render() {
    return ;
  }
}
 
export default App;

输出：

基于类的组件区别于函数式组件的主要特征是它们可以访问一个状态，该状态指示组件的当前行为和外观（后来，随着版本 16.8 中引入的 React Hooks，我们能够声明一个有状态的组件而不声明类）。可以通过调用setState()函数来修改此状态。可以使用setState()函数一次修改一个或多个定义为状态一部分的变量、数组或对象。

示例：演示在基于类的组件中使用状态的程序。打开App.js文件并将代码替换为以下代码。

javascript

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { change: true };
  }
  render() {
    return (
      

         {
            this.setState({ change: !this.state.change });
          }}
        >
          Click Here!
        
        {this.state.change ? (
          
Welcome to GeeksforGeeks
        ) : (
          
A Computer Science Portal for Geeks
        )}
      
    );
  }
}
 
export default App;

输出：

借助 props 将数据传递给其他组件。 Props对 ReactJS 中的所有组件的工作方式类似，无论它们是基于类的还是函数式的。道具总是从父组件传递到子组件。 ReactJS 通常不允许组件修改自己的 props。修改 props 的唯一方法是更改从父组件传递到子组件的 props。这通常通过传递对父组件中的函数的引用来完成，这会更改传递给子组件的道具。

示例：演示在基于类的组件中使用道具的程序。打开App.js文件并将代码替换为以下代码。

javascript

import React from "react";
 
class App extends React.Component {
  render() {
    return 
{this.props.data}
;
  }
}
 
class propsExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { change: true };
  }
  render() {
    return (
      

         {
            this.setState({ change: !this.state.change });
          }}
        >
          Click Here!
        
        {this.state.change ? (
          
        ) : (
          
        )}
      
    );
  }
}
 
export default App;

输出：

基于类的组件可以访问生命周期函数，如componentWillMount() 、 componentDidMount() 、 componentWillReceiveProps() 、 componentWillUpdate() 、 shouldComponentUpdate() 、 render()和componentWillUnmount() ；。这些生命周期函数在生命周期的不同阶段被调用，并用于各种目的，例如更改状态或执行某些工作（例如从外部 API 获取数据）。它们也被称为生命周期钩子。

示例：演示生命周期钩子使用的程序。打开App.js文件并将代码替换为以下代码。

javascript

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "Welcome!" };
  }
 
  componentWillMount() {
    this.setState({
      text: "GeeksforGeeks",
    });
  }
 
  render() {
    return 
{this.state.text}
;
  }
}
 
export default App;

输出：

基于类的组件比它们的功能对应物稍慢。差异非常小，对于较小的 Web 应用程序几乎可以忽略不计——尽管随着应用程序中组件数量的增加，性能差异也会增加。此外，基于类的组件在程序员方面涉及更多的编码，使得它们的使用效率略低。