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 = 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 = 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企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]