react如何创建函数

创建函数组件的几种方式

React中创建函数组件主要有以下几种方法：

普通函数声明

function MyComponent(props) {
  return <div>Hello, {props.name}</div>;
}

箭头函数

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

带默认导出的函数组件

export default function MyComponent(props) {
  return <div>Hello, {props.name}</div>;
}

使用Hooks的函数组件

现代React推荐使用Hooks的函数组件写法：

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

带TypeScript的类型定义

使用TypeScript时可以为props添加类型：

interface MyComponentProps {
  name: string;
  age?: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      {age && <p>Age: {age}</p>}
    </div>
  );
}

无状态函数组件

简单展示组件可以写成纯函数形式：

const Greeting = ({ name }) => <h1>Hello, {name}!</h1>;

带默认props的函数组件

可以为函数组件设置默认props：

function MyComponent({ name = 'Guest' }) {
  return <div>Hello, {name}</div>;
}

MyComponent.defaultProps = {
  name: 'Anonymous'
};