react hooks--useState

Hooks的作用：可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

useState的功能：让你在函数式组件中使用state。

一、基础用法

​const [state, setState] = useState<type>(initialValue) 

state：状态变量

setState：用于修改状态的 Setter 函数

type：（ts）数据类型。当你使用ts的时候，可用此定义数据类型

initialValue：状态的初始值，如不填则默认为undefined

二、具体案例

在函数式组件中，实现更改人物信息（我们的案例是用react+ts写的）。

import React, { useState } from 'react';
const Learn: React.FC = () => {
  const [name, setName] = useState<string>('小红');
  const [age, setAge] = useState<number>(10);
  return (
    <div style={{ padding: '20px' }}>
      <p>我的名字：{name}</p>
      <p>我的年龄：{age} 岁</p>
      <button onClick={() => {setName('小明'); setAge(16)}}> 
        点击换人
      </button>
    </div>
  );
};
export default Learn;

实现逻辑如下：

①初始化定义名称name的值为'小红'，年龄age的值为10；定义更新name的函数为setName，更新age的函数为setAge。

②点击按钮<点击换人>时，触发点击事件，使用setName和setAge函数分别更新人物信息name为 '小明'，age为16。

③重新渲染，视图显示更新后的人物信息。

三、效果展示

感谢您读完本文！如果本文对您有帮助，请点个赞呗，您的点赞是对我最大的支持和认可！

我的公众号：大前端教程，欢迎关注，会定期更新前端知识，希望能帮到您。