初识 React：组件创建指南及应用实践

作为一名 React 开发新手，组件创建无疑是入门的第一步。React 提供了两种组件创建方式：函数组件和 class 组件，每种方式都有其独特的特点和适用场景。了解它们的异同，对于您的 React 学习之旅至关重要。

函数组件

函数组件，顾名思义，是使用 JavaScript 函数来创建的组件。它没有状态，并且生命周期方法非常有限。函数组件的写法非常简洁，易于理解和使用，尤其适合于简单的、静态的组件。

函数组件的定义方式如下：

const MyComponent = (props) => {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
};

class 组件

class 组件，则使用 ES6 的 class 语法来创建。它具有状态和生命周期方法，因此功能更强大。class 组件适用于复杂的、动态的组件，例如带有表单或网络请求的组件。

class 组件的定义方式如下：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'World'
    };
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.state.name}!</h1>
      </div>
    );
  }
}

两种组件方式的比较

特征	函数组件	class 组件
状态	无	有
生命周期方法	有限	完整
适用场景	简单、静态的组件	复杂、动态的组件
编写难度	易	难

应用实践

为了帮助您快速理解和掌握 React 组件的创建方式，我们提供一个实际的应用示例。假设我们要创建一个简单的计数器组件，它可以显示当前计数并提供一个按钮来递增计数。

使用函数组件，我们可以如下实现：

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

使用 class 组件，我们可以如下实现：

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

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

结语

React 组件创建的两种方式各有其优点和缺点。通过理解它们的异同，您可以根据具体情况选择合适的组件创建方式。通过实际应用示例，您将对 React 组件的创建和使用有更深入的了解。