React函数式组件是一种用函数定义的组件形式，它是React中定义UI的一种简洁方式。函数式组件基于纯函数的概念，接收props作为参数，并返回要渲染的内容。
React函数式组件
特点
React函数式组件具有以下特点：
- 简洁：使用函数的方式定义组件，语法简单直观。
- 无状态：函数式组件没有内部状态（state），只依赖于传入的props。
- 可复用：函数式组件易于复用，可以在多个地方使用相同的组件函数。
- 易于测试：函数式组件是纯函数，只依赖于输入的props，因此易于编写测试用例。
创建函数式组件
创建一个函数式组件非常简单，只需要定义一个函数，函数名以大写字母开头，返回要渲染的内容。
以下是一个简单的函数式组件示例：
代码语言：javascript复制import React from 'react';
function MyComponent(props) {
return <div>Hello, {props.name}!</div>;
}在上面的示例中，我们创建了一个名为MyComponent的函数式组件。它接收一个props参数，并使用props.name来显示问候消息。
使用函数式组件
使用函数式组件非常类似于使用普通的React组件。
以下是一个使用函数式组件的示例：
代码语言：javascript复制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扩展函数式组件的示例：
代码语言：javascript复制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发生变化时进行更新。
