在 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 组件。