React函数式组件

React函数式组件是一种用函数定义的组件形式，它是React中定义UI的一种简洁方式。函数式组件基于纯函数的概念，接收props作为参数，并返回要渲染的内容。

React函数式组件

特点

React函数式组件具有以下特点：

1. 简洁：使用函数的方式定义组件，语法简单直观。
2. 无状态：函数式组件没有内部状态（state），只依赖于传入的props。
3. 可复用：函数式组件易于复用，可以在多个地方使用相同的组件函数。
4. 易于测试：函数式组件是纯函数，只依赖于输入的props，因此易于编写测试用例。

创建函数式组件

创建一个函数式组件非常简单，只需要定义一个函数，函数名以大写字母开头，返回要渲染的内容。

以下是一个简单的函数式组件示例：

import React from 'react';

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

在上面的示例中，我们创建了一个名为MyComponent的函数式组件。它接收一个props参数，并使用props.name来显示问候消息。

使用函数式组件

使用函数式组件非常类似于使用普通的React组件。

以下是一个使用函数式组件的示例：

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyComponent name="Alice" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

在上面的示例中，我们创建了一个名为App的函数式组件，并在其中使用了MyComponent组件。我们通过name属性将值传递给MyComponent组件。

使用Hooks扩展函数式组件

React提供了Hooks作为函数式组件的扩展，它们使函数式组件能够拥有状态和其他特性，例如使用useState来管理组件的状态、使用useEffect来处理副作用等。

以下是一个使用Hooks扩展函数式组件的示例：

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

在上面的示例中，我们使用useState来创建了一个名为count的状态变量，并使用setCount函数来更新状态。我们还使用了useEffect来在组件渲染后更新文档标题，并在count发生变化时进行更新。