使用react函数组件

在React中，函数组件是一种轻量级、简洁的方式来创建组件。相比于类组件，函数组件更易于理解和编写，因为它们只包含纯粹的JavaScript函数。以下是使用React函数组件的基本步骤：

1. 定义组件函数：
函数组件接受三个参数：`props`（属性）、`state`（仅限于类组件中）以及一个可选的`children`参数，用于接收并渲染子元素。

import React from 'react';

function MyFunctionComponent(props) {
  return (
    <div>
      {/* 使用props中的数据 */}
      <p>{props.message}</p>
      {/* 返回想要渲染的内容 */}
    </div>
  );
}

2. 使用组件：
调用函数组件并将其分配给标签名或挂载到DOM上。

function App() {
  return (
    <MyFunctionComponent message="Hello, World!" />
  );
}

3. 生命周期方法：
尽管函数组件不像类组件那样提供完整的生命周期方法，但有一些替代方案，如`useEffect`用于副作用操作，`useState`或`useReducer`处理状态变化。

4. 高阶组件（HOCs）：
为了实现一些高级功能，例如权限检查、性能优化等，可以使用高阶组件，它们是接受组件作为输入并返回新组件的函数。

const withAuth = (WrappedComponent) => ({/* ... */) => /* ... */;
function AuthenticatedApp() {
  return withAuth(App);
}