浙江龙网

  1. 首页 > 生活百科 > >

React 函数组件

生活百科React 函数组件

React 函数组件1、定义方式

React 函数组件是指使用函数方法定义的组件 。定义方式：与函数的定义方式相同 ， 需要将内容 return 出来 ， 需要注意的是最外层只有一个标签或者使用<></>(Fragment 标签)包裹起来，方法写在 return 前面 。
const App = () => {const getData = https://www.huyubaike.com/biancheng/() => {return [1, 2, 3, 4, 5];};return (<>

一级标题

二级标题

{getData()}

);};export default App;2、React Hook
由于 React 的函数组件没有生命周期 。所以我们使用 Hook 来更改变量和进行数据操作 。在项目中最常用的 hook 如 useState、useEffect 以及 useRef 。
2.1 useState
点击 add 数字加一，点击 sub 数字减一
import React, { useState } from "react";export default App = () => {const [count, setCount] = useState(0);// 这里表示定义一个count变量 ， 初始值为0；setCount表示对改变量进行赋值 。return (<><p>{count}</p><button onClick={() => setCount(count + 1)}>add</button><button onClick={() => setCount(count - 1)}>sub</button></>);};
上述代码等同于
import React from "react";export default class App extends React.Component {constructor(props) {super(props);this.state = {count: 0,};}render() {const { count } = this.state;return (<><p>{count}</p><button onClick={() => this.setState({ count: count + 1 })}>add</button><button onClick={() => this.setState({ count: count - 1 })}>sub</button></>);}}2.2 useRef
useRef 可以用于定义一个全局变量或者用于获取 DOM 元素
import React, { useRef } from "react";export default App = () => {const pRef = useRef("0");const inputRef = useRef(null);const add = () => {pRef.current = pRef.current + 1; // 不生效};return (<><input ref={inputRef} type="text" value="https://www.huyubaike.com/biancheng/1" /><p>{pRef.current}</p><button onclick={add}>add</button></>);};2.3 useEffect
useEffect 可以看作 class 组件中的 componentDidMount 和 componentDidUpdate 函数
import React, { useState, useEffect } from "react";const [status, setStatus] = useStatus(false);const [data, setData] = useStatus([]);export default App = () => {const [status, setStatus] = useState(false);const [data, setData] = useState([]);useEffect(() => {setData([2, 3]);}, []); // 在页面刚渲染完成执行（componentDidMount）useEffect(() => {console.log("data:", data);}, status); // 每当status改变时，执行代码const change = () => {setStatus(false);if (data) {setData([...data, data.push(1)]);setStatus(true);}};return (<><p>{data}</p><button onClick={change}>add</button></>);};3、Antd 中 modal 和 form 组件
Modal 和 Form 一起配合使用时，设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据，需要设置 Form 组件的 preserve={false}
import { Table, Button, Form, Input, Modal } from "antd";import React, { useState, useEffect } from "react";const FormButton = ({ open, onCancel, record, getData }) => {const [form] = Form.useForm();const onFinish = (values) => {getData(values);};return (<Modalopen={open}onCancel={onCancel}width={300}footer={null}destroyOnClose><Formform={form}onFinish={onFinish}preserve={false}initialValues={record}><Form.Item name="title" label="标题"><Input /></Form.Item><Form.Item name="content" label="内容"><Input type="textarea" /></Form.Item><Form.Item><Button type="primary" htmlType="submit">提交</Button><ButtonhtmlType="button"onClick={onCancel}style={{ margin: "0 8px" }}>取消</Button></Form.Item></Form></Modal>);};const App = () => {const [open, setOpen] = useState(false);const [data, setData] = useState(JSON.stringify({title: "公告",content: "明天放假一天 ， 注意时间分配",}));const onCancel = () => {setOpen(false);};const columns = [{title: "标题",dataIndex: "title",key: "title",width: "200",},{title: "内容",dataIndex: "content",key: "content",width: "200",},];const getData = https://www.huyubaike.com/biancheng/(val) => {console.log("提交的数据是：", val);if (val) {setOpen(false);setData(JSON.stringify(val));}return data;};useEffect(() => {getData();}, []);return (<div><Buttontype="primary"onClick={() => {setOpen(true);}}>修改</Button><FormButtonopen={open}record={JSON.parse(data)}onCancel={onCancel}getData=https://www.huyubaike.com/biancheng/{getData}/>);};export default App;

推荐阅读


上一篇：以开发之名 | bilibili会员购让IP在眼前动起来

下一篇：Spring Boot 应用的热部署配置