如何创建React组件？

在React里，一切皆组件。这就像玩乐高，你把一个个小模块搭起来，最后变成整个应用。创建组件主要有两种方式：函数组件和类组件。现在大家更爱用函数组件，因为它写起来简单，再配上Hooks，功能也一点不弱。

用函数写组件：现在的主流

函数组件就是普通的JavaScript函数，它接收一个props对象作为参数，然后返回一些JSX（看起来像HTML的JavaScript语法扩展）。

function Welcome(props) {
  return <h1>你好，{props.name}！</h1>;
}

用的时候，就像用HTML标签一样：

<Welcome name="小明" />

这个函数会被调用，{name: "小明"}会作为props传进去，最后渲染出<h1>你好，小明！</h1>。就这么简单。

如果这个组件不需要维护自己的状态，也不需要操心生命周期，那么一个纯函数就够用了。它清晰、可预测，也方便测试。

用类写组件：经典的方式

在Hooks出现之前，类组件是唯一能拥有内部状态和生命周期方法的组件。

class Welcome extends React.Component {
  render() {
    return <h1>你好，{this.props.name}！</h1>;
  }
}

类组件必须包含一个render()方法，它返回要渲染的内容。通过this.props来访问传入的属性。

当你需要状态时，就得在构造函数里初始化this.state，然后用this.setState()来更新。不过，自从有了Hooks，函数组件也能做这些事了，所以新项目里类组件见得越来越少。

给组件加点状态和交互：用Hooks

函数组件之所以能成为主流，全靠Hooks。useState Hook让你能在函数组件里添加状态。

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      你点了 {count} 次
    </button>
  );
}

useState(0)给组件一个初始状态count为0，同时给你一个更新它的函数setCount。点击按钮时，调用setCount更新状态，组件自动重新渲染，显示新的点击次数。

所以现在创建组件的首选路径很清晰了：用函数组件，需要状态或副作用时就引入对应的Hook。这种写法更简洁，逻辑也更容易复用和测试。类组件当然还能用，但除非你在维护老代码，否则可能不需要特意去碰它了。