在React中，创建组件有两种主要方式：函数组件和类组件。每种方式都有自己的语法和用例，尽管随着React Hooks的引入，它们之间的差距已经显著缩小。但选择适当的组件类型对于构建高效和可维护的React应用程序仍然非常关键。

import React from 'react';

// 使用function关键字定义函数组件
function FunctionComponent(props) {
 return (
   div
     h1Hello, {props.name}!h1
     p这是一个函数组件。p
   div
 );
}

// 使用箭头函数语法定义函数组件
const FunctionComponent = (props) => {
 return (
   div
     h1Hello, {props.name}!h1
     p这是一个函数组件。p
   div
 );
};

export default FunctionComponent;

import React, { useState } from 'react';

const FunctionComponent = () => {
 // 使用useState Hook来管理状态
 const [count, setCount] = useState(0);

 return (
   div
     p计数：{count}p
     button onClick={() => setCount(count + 1)}增加button
   div
 );
};

export default FunctionComponent;

import React, { useState, useEffect } from 'react';

const FunctionComponent = () => {
 const [count, setCount] = useState(0);

 // useEffect Hook来复制componentDidMount和componentDidUpdate
 useEffect(() => {
   // 此代码块在每次渲染后运行
   console.log("组件挂载或更新");

   // 清理函数（复制componentWillUnmount）
   return () => {
     console.log("组件将卸载");
 };
 });

 return (
   div
     p计数：{count}p
     button onClick={() => setCount(count + 1)}增加button
   div
 );
};

export default FunctionComponent;

import React, { Component } from 'react';

// 定义一个扩展自React.Component或React.PureComponent的类组件
class ClassComponent extends Component {
 // 如果需要，定义构造函数
 constructor(props) {
   super(props);
   // 如果需要，初始化状态
   this.state = {
     count: 0
   };
 }

 // 如果需要，定义生命周期方法
 componentDidMount() {
   // 组件挂载后运行的代码
 }

 // 如果需要，定义实例方法
 handleClick = () => {
   // 更新状态或执行其他逻辑
   this.setState({ count: this.state.count + 1 });
 }

 // 定义render()方法来返回JSX
 render() {
   return (
     div
       p计数：{this.state.count}p
       button onClick={this.handleClick}增加button
     div
   );
 }
}

export default ClassComponent;

import React, { Component } from 'react';

class ClassComponent extends Component {
 constructor(props) {
   super(props);
   // 初始化状态
   this.state = {
     count: 0
   };
 }

 // 定义一个方法来更新状态
 incrementCount = () => {
   // 使用this.setState()来更新状态
   this.setState({ count: this.state.count + 1 });
 }

 render() {
   return (
     div
       p计数：{this.state.count}p
       button onClick={this.incrementCount}增加button
     div
   );
 }
}

export default ClassComponent;

import React, { Component } from 'react';

class ClassComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
     data: null
   };
 }

 componentDidMount() {
   // 在组件挂载时获取初始数据
   this.fetchData();
 }

 componentDidUpdate(prevProps, prevState) {
   // 检查数据是否发生变化
   if (prevState.data !== this.state.data) {
     // 数据已更改，执行其他操作
     console.log('数据已更新：', this.state.data);
   }
 }

 componentWillUnmount() {
   // 在组件卸载前执行清理任务
   console.log('组件将卸载');
   // 例如，移除事件监听器、取消进行中的任务等。
 }

 fetchData() {
   // 模拟从API获取数据
   setTimeout(() => {
     this.setState({ data: '从API获取的一些数据' });
   }, 1000);
 }

 render() {
   return (
     div
       p数据：{this.state.data}p
     div
   );
 }
}

export default ClassComponent;

import React, { Component } from 'react';

class ClassComponent extends Component {
 constructor(props) {
   super(props);
   this.state = {
     count: 0
   };
 }

 // 自定义方法处理增加计数
 handleIncrement = () => {
   this.setState({ count: this.state.count + 1 });
 }

 // 自定义方法处理减少计数
 handleDecrement = () => {
   this.setState({ count: this.state.count - 1 });
 }

 render() {
   return (
     div
       p计数：{this.state.count}p
       button onClick={this.handleIncrement}增加button
       button onClick={this.handleDecrement}减少button
     div
   );
 }
}

export default ClassComponent;

import React, { useState } from 'react';

function Counter() {
 const [count, setCount] = useState(0);

 return (
   div
     p计数：{count}p
     button onClick={() => setCount(count + 1)}增加button
   div
 );
}