ReactJS 中的类组件 - Javascript

在 ReactJS 中，有两种类型的组件：函数组件和类组件。类组件是一种使用面向对象编程思想的组件类型，在其中可以使用类属性和方法。

创建一个类组件

以一个简单的计数器组件为例，我们可以创建如下的类组件：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }
  
  increment() {
    this.setState({count: this.state.count + 1});
  }
  
  decrement() {
    this.setState({count: this.state.count - 1});
  }
  
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

在这个示例中，Counter 继承了 React.Component 并创建了一个构造函数。此构造函数初始化了 this.state，并将其绑定到 increment 和 decrement 方法上。当这些方法被调用时，它们将使用 setState 方法更新组件的状态，而不是直接修改 this.state。

最后，render 方法返回计数器组件的 UI。render 方法在组件被挂载时被调用，更新组件时也会被调用。

使用类组件

要在 React 应用程序中使用类组件，你可以像其他组件一样使用它：

ReactDOM.render(<Counter />, document.getElementById('root'));

这将在页面上呈现一个计数器，并为 Counter 组件的实例初始化一个 state。

高级用法

类组件可以使用许多高级用法，如生命周期方法、静态属性、PropTypes 等。这允许你构建更复杂和可重用的组件。

例如，你可以在你的类组件中使用 componentDidMount 生命周期方法来设置组件的初始状态：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }
  
  componentDidMount() {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }
  
  render() {
    return (
      <ul>
        {this.state.data.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    );
  }
}

在这个例子中，MyComponent 通过 componentDidMount 生命周期方法向服务器请求数据。data 属性从服务器响应中获取，并使用 setState 方法更新组件的状态。最后，使用 data 属性呈现可切换的列表。

总结

类组件是 ReactJS 中的一种组件类型，它是使用面向对象编程思想创建的。它允许你使用类属性和方法，以及许多高级用法，如生命周期方法和PropTypes。要创建一个类组件，你需要扩展 React.Component 类。然后，你可以使用类属性和方法来定义组件的状态和行为。最后，通过呈现 render 方法返回的 UI 来使用组件。