React hooks之useState用法（一）

系列文章目录

学习React已经有很长的一段时间了，今天决定重新回顾一下跟React相关的一些知识点

---

---

结构如下

本文讲述的主要内容如下：

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数据</Button><Table style={{ width: '600px' }} columns={tableColumn} dataSource={tableData}></Table></Space>
}

结果图如下：

初始渲染图如下：

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

三、代码解释如下图所示

主体代码

四、总结

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