React中定义和使用函数式组件

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。