中牟网站建设,网站建设带服务器,wordpress 功能模块,怎么学平面设计啊系列文章目录 学习React已经有很长的一段时间了#xff0c;今天决定重新回顾一下跟React相关的一些知识点 文章目录系列文章目录结构如下一、hooks是什么#xff1f;useState可以能做什么二、如何使用useState#xff08;#xff09;第一步#xff1a;创建【函数组件…系列文章目录 学习React已经有很长的一段时间了今天决定重新回顾一下跟React相关的一些知识点 文章目录系列文章目录结构如下一、hooks是什么useState可以能做什么二、如何使用useState第一步创建【函数组件无状态组件】函数组件(Child)代码如下:第二步引入useState代码如下第三步声明状态数据代码如下tableColumns 的数据第四步渲染并修改Table数据代码如下结果图如下初始渲染图如下点击按钮后的渲染图如下三、代码解释如下图所示主体代码四、总结结构如下
本文讲述的主要内容如下 1、useState是什么 2、useState能做什么 3、useState的使用场景都有哪些 一、hooks是什么useState可以能做什么 1.Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 2.useState是Hook中的一员主要是用来在【无状态组件函数组件】声明可修改的状态的 一个Api 二、如何使用useState
第一步创建【函数组件无状态组件】 React 提供的Hooks的Api主要的是为了节省开发者的代码书写量同时也对 函数组件的功能进行了拓展 函数组件(Child)代码如下:
import React from react;
import ./index.css;//这里引入了Ant Design React 组件
import { Space, Table, Tag, Button } from antd;export default function Child() {//这里引入了Ant Design React 组件return Space /Space
}第二步引入useState
代码如下
import React, { useState } from react;第三步声明状态数据
代码如下 const [tableData, setTableData] useState([{ age: 1, name: xioatian, height: 123 }])//这里是我导入的外部的一个tableColumnsconst [tableColumn] useState(tableColumns)tableColumns 的数据
export const tableColumns [{title: 姓名,dataIndex: name,key: name,},{title: 年龄,dataIndex: age,key: age,},{title: 姓名,dataIndex: height,key: height,},
];
第四步渲染并修改Table数据
代码如下
import React, { useState, useEffect } from react;
import ./index.css;
import { Space, Table, Tag, Button } from antd;
import { tableColumns } from ./dataScource;export default function Child() {//定义了 tableData 数据。 setTableData修改方法const [tableData, setTableData] useState([{ age: 1, name: xioatian, height: 123 }])//定义了 tableColumn 数据。tableColumns是外部导入的const [tableColumn] useState(tableColumns)return Space//此处是设置了一个点击事件点击后触发setTableData方法修改数据Button onClick{() { setTableData([{ name: 123, age: 3, height: 0 }]) }}点击我修改Table数据/ButtonTable style{{ width: 600px }} columns{tableColumn} dataSource{tableData}/Table/Space
}结果图如下
初始渲染图如下 点击按钮后的渲染图如下 三、代码解释如下图所示
主体代码 四、总结
useState用法非常的 So Easy 后续更新useState更新慢的问题
