在 React 中，函数式组件是一种通过普通 JavaScript 函数定义的组件。它们接收 props 作为参数，并返回 React 元素。从 React 16.8 开始，函数式组件还可以利用 Hooks 来增加状态和其他 React 特性。
1. 简单的函数式组件
|---|-----------------------------------|
| | import React from 'react'; |
| | |
| | const HelloWorld = (props) => { |
| | return ( |
| | <div> |
| | <h1>Hello, {props.name}!</h1> |
| | </div> |
| | ); |
| | }; |
| | |
| | export default HelloWorld; |
在这个例子中，HelloWorld 是一个函数式组件，它接收一个 props 对象，并返回一个包含 h1 元素的 div。
2. 使用解构赋值来简化 props
为了更简洁地访问 props，你可以使用解构赋值：
|---|--------------------------------------|
| | import React from 'react'; |
| | |
| | const HelloWorld = ({ name }) => { |
| | return ( |
| | <div> |
| | <h1>Hello, {name}!</h1> |
| | </div> |
| | ); |
| | }; |
| | |
| | export default HelloWorld; |
在这个例子中，我们通过解构赋值直接获取 props.name，使得代码更加简洁。
3. 使用 Hooks 增加状态
函数式组件可以使用 React Hooks 来增加状态和其他特性。例如，使用 useState Hook：
|---|------------------------------------------------------------------|
| | import React, { useState } from 'react'; |
| | |
| | const Counter = () => { |
| | const [count, setCount] = useState(0); |
| | |
| | return ( |
| | <div> |
| | <p>Count: {count}</p> |
| | <button onClick={() => setCount(count + 1)}>Increment</button> |
| | </div> |
| | ); |
| | }; |
| | |
| | export default Counter; |
在这个例子中，Counter 组件使用 useState Hook 来维护一个 count 状态，并包含一个按钮来增加 count 的值。
4. 使用 Effects Hook
useEffect Hook 可以让你在组件渲染到 DOM 后执行副作用操作，例如数据获取或订阅：
|---|-------------------------------------------------------|
| | import React, { useEffect, useState } from 'react'; |
| | |
| | const DataFetcher = () => { |
| | const [data, setData] = useState(null); |
| | |
| | useEffect(() => { |
| | // 模拟数据获取 |
| | const fetchData = async () => { |
| | const result = await new Promise(resolve => |
| | setTimeout(() => resolve("Fetched Data"), 2000) |
| | ); |
| | setData(result); |
| | }; |
| | |
| | fetchData(); |
| | |
| | // 清理函数（可选） |
| | return () => { |
| | console.log('Cleanup'); |
| | }; |
| | }, []); // 空数组作为第二个参数表示这个 effect 只在组件挂载和卸载时运行一次 |
| | |
| | return ( |
| | <div> |
| | {data ? <p>{data}</p> : <p>Loading...</p>} |
| | </div> |
| | ); |
| | }; |
| | |
| | export default DataFetcher; |
在这个例子中，DataFetcher 组件使用 useEffect 来模拟一个异步数据获取操作，并在数据获取完成后更新状态。
5. 组合组件
你可以将多个函数式组件组合在一起，形成一个更复杂的 UI：
|---|--------------------------------------------|
| | import React from 'react'; |
| | import HelloWorld from './HelloWorld'; |
| | import Counter from './Counter'; |
| | import DataFetcher from './DataFetcher'; |
| | |
| | const App = () => { |
| | return ( |
| | <div> |
| | <HelloWorld name="React" /> |
| | <Counter /> |
| | <DataFetcher /> |
| | </div> |
| | ); |
| | }; |
| | |
| | export default App; |
在这个例子中，App 组件包含了 HelloWorld、Counter 和 DataFetcher 组件。