【第29期】一文学会用React类组件编写组件

概述

React类组件是React中一种常用的组件编写方式，它可以帮助我们更好地管理组件的状态和生命周期。

编写要求

使用React类组件编写组件时，需要注意以下几点：

• 必须继承自React.Component。
• 必须定义一个构造函数来初始化组件的状态。
• 必须在render方法中返回JSX代码，用于描述组件的结构和样式。
• 可以定义其他方法来处理组件的逻辑。
• 可以通过this.setState来更新组件的状态。
• 可以通过this.props来获取父组件传递的属性值。

创建项目

使用Create React App创建项目并使用类组件编写一个详细案例的步骤：

首先，确保你已经安装了Node.js和npm。然后在终端中运行以下命令来安装Create React App：

npm install -g create-react-app

创建一个新的React项目，并进入项目目录：

npx create-react-app my-app
cd my-app

在src目录下创建一个新的文件，例如Counter.js，用于编写计数器组件的代码。在Counter.js中，使用以下代码编写一个简单的计数器组件：

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={() => this.increment()}>Increment</button>
        <button onClick={() => this.decrement()}>Decrement</button>
      </div>
    );
  }
}
export default Counter;

在src目录下的App.js文件中，引入Counter组件，并在render方法中使用它。修改App.js如下：

import React from 'react';
import Counter from './Counter';
function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}
export default App;

在src目录下的index.js文件中，将App组件渲染到根元素中。修改index.js如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

运行以下命令启动React开发服务器：

npm start

在浏览器中打开http://localhost:3000，你将看到一个简单的计数器组件。点击“Increment”按钮，计数器的值将增加；点击“Decrement”按钮，计数器的值将减少。

在这个案例中，

• 我们使用Create React App创建了一个新的React项目。我们编写了一个Counter.js组件，其中使用了React类组件的方式来实现计数器的逻辑。然后，我们在App.js中引入了Counter组件，并在index.js中将App组件渲染到根元素中。
  
• 我们定义了一个Counter类，它继承自React.Component。在构造函数中，我们初始化了组件的状态state，其中count用于存储计数器的值。
  
• 我们还定义了两个方法increment和decrement，用于增加和减少计数器的值。这两个方法通过调用this.setState来更新组件的状态。
  
• 在render方法中，我们通过使用JSX语法来定义组件的结构和样式。我们通过this.state.count来获取当前计数器的值，并将其显示在页面上。两个按钮分别调用increment和decrement方法来更新计数器的值。
  
• 最后，我们使用export default将Counter组件导出，以便在其他地方可以引入和使用它。