系列文章目录

学习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  
}

第二步：引入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 //此处是设置了一个点击事件，点击后触发setTableData方法修改数据() => { setTableData([{ name: '123', age: 3, height: 0 }]) }}>点击我修改Table数据{ width: '600px' }} columns={tableColumn} dataSource={tableData}>
}

结果图如下：

初始渲染图如下：

点击按钮后的渲染图如下：

三、代码解释如下图所示

主体代码

四、总结

useState用法非常的 So Easy！！！！！！！！！！💪💪💪
后续更新，useState更新慢的问题