React 函数组件
React 函数组件
1、定义方式
React 函数组件是指使用函数方法定义的组件。
定义方式:与函数的定义方式相同,需要将内容 return 出来,需要注意的是最外层只有一个标签或者使用<></>
(Fragment 标签)包裹起来,方法写在 return 前面。
const App = () => {
const getData = () => {
return [1, 2, 3, 4, 5];
};
return (
<>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h2>{getData()}</h2>
</>
);
};
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="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 (
<Modal
open={open}
onCancel={onCancel}
width={300}
footer={null}
destroyOnClose
>
<Form
form={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>
<Button
htmlType="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 = (val) => {
console.log("提交的数据是:", val);
if (val) {
setOpen(false);
setData(JSON.stringify(val));
}
return data;
};
useEffect(() => {
getData();
}, []);
return (
<div>
<Button
type="primary"
onClick={() => {
setOpen(true);
}}
>
修改
</Button>
<FormButton
open={open}
record={JSON.parse(data)}
onCancel={onCancel}
getData={getData}
/>
<Table dataSource={[JSON.parse(data)]} columns={columns} />
</div>
);
};
export default App;
React 函数组件的更多相关文章
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- react hooks 如何自定义组件(react函数组件的封装)
前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- React - 组件:函数组件
目录: . 组件名字首字母一定是大写的 . 返回一个jsx . jsx依赖React,所以组件内部需要引入React . 组件传参 a. 传递. <Component list={ arrDat ...
- React函数类组件及其Hooks学习
目录 函数类组件 函数式组件和类式组件的区别: 为什么要使用函数式组件? Hooks概念及常用的Hooks 1. useState: State的Hook 语法 useState()说明: setXx ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- react创建组件的几种方式及其区别
react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件 ③.es6形式的extends React.Component定义的组 ...
- React 面向组件化编程 - 封装了webpack - npm run build 产生的包的 /static 引用路径问题
React 面向组件化编程 面向对象 ----> 面向模块 ----> 面向组件 套路: 注意: 组件名必须大写开头: 只能有一个根标签: <input />虚拟DOM 元素必 ...
随机推荐
- 获取Windows正在运行的窗口进程
主要是获取Alt+Tab中展示的窗口 原理主要是获取窗口的样式来判断是否会在Alt+Tab中显示 具体代码如下 /// <summary> /// Alt+Tab 应用 /// </ ...
- 给定字符串定义char *a = “I love China!”,读入整数n,输出在进行了a = a + n这个赋值操作以后字符指针a对应的字符串
include<stdio.h> include<string.h> int main() { const char *a="I love China!"; ...
- FastJson远程命令执行漏洞学习笔记
FastJson远程命令执行漏洞学习笔记 Fastjson简介 fastjson用于将Java Bean序列化为JSON字符串,也可以从JSON字符串反序列化到JavaBean.fastjson.ja ...
- KingbaseES 数据库删除功能组件
关键字: KingbaseES.卸载.删除功能 一.安装后检查 在安装完成后,可以通过以下几种方式进行安装正确性验证: 1. 查看安装日志,确认没有错误记录; 2. 查看开始菜单: 查看应用程 ...
- [Python]-openpyxl模块Excel数据处理-读取公式的结果
日常需要Python来处理各种数据,处理Excel数据常用的库一般有openpyxl.xlrd(读取).xlwt(写入). 经过对比发现openpyxl模块比较好用. openpyxl模块 这篇笔记比 ...
- 详解字符编码与 Unicode
人类交流使用 A.B.C.中 等字符,但计算机只认识 0 和 1.因此,就需要将人类的字符,转换成计算机认识的二进制编码.这个过程就是字符编码. ASCII 最简单.常用的字符编码就是 ASCII(A ...
- 在云原生中监控JVM指标
一般 Java 集成 Prometheus 监控指标有两种方式.一种是依赖中引入,另外一种是通过agent执行. 依赖引入 <!-- The client --> <dependen ...
- KVM常用命令及配置文件
1.查看虚拟机配置文件 [root@KVM tmp]# ls /etc/libvirt/qemu/ damowang.xml networks [root@KVM tmp]# ls /etc/libv ...
- 第一个Django应用 - 第二部分:Django数据库配置,模型和后台
汇总操作 注:polls为应用名 1.执行命令:python manage.py migrate,生成默认的数据库表等 2.修改应用的models.py文件,添加数据库表模型等 3.INSTALLED ...
- 迁移一个仓库到新的Gitlab
一般这种迁移,要注意旧仓库的提交历史等信息也要同步到新的仓库. 先使用如下命令克隆老的: git clone --bare git@gitlab.test1.com:f2e/test.git 新仓库创 ...