hook函数——useState

news2024/9/24 7:19:11

useState

useState是React中的一个Hook函数，用于在函数组件中添加状态。基本使用语法如下：
const [state, setState] = useState(initialState)

state：表示当前状态的值
setState：更新状态的函数
initialState：初始状态值

本文介绍了number,string,bool,object四种类型的usestate的使用

1.计数器

如果想通过状态模拟一个计数器效果，首先要明确状态的类型为一个number型，并且赋初值可以为0

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [count, setcount] = useState(0)
  return (
    <div className="App">
      <div>{count}</div>
      <button onClick={() => setcount(count + 1)}>+1</button>
    </div>
  );
}

export default App;

在控制台查看组件状态，初始时为0，点击执行setcount函数后，count的值加了1，并且组件状态更改为1
在这里插入图片描述

但是如果在点击函数上添加输出当前的count值，每次点击都只在控制台输出前一次的值，这是因为调用 set 函数不会改变已经执行的代码中当前的 state，它只影响下一次渲染中 useState 返回的内容。

2.更新文本

在原来的基础上添加一个输入框，通过usestate将输入的字符串存入状态

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [count, setcount] = useState(0)
  const [text, settext] = useState('')
  return (
    <div className="App">
      <div>{count},{text}</div>
      <button onClick={() => { setcount(count + 1); console.log(count) }}>+1</button>
      <input value={text} onChange={(e) => settext(e.target.value)}></input>
    </div>
  );
}

export default App;

可以观察到在界面和组件的状态中都有我们输入的内容
在这里插入图片描述

3.复选框

通过给状态变量设置一个初始bool值，点击函数取反存入状态，通过三元运算符渲染语句

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [count, setcount] = useState(0)
  const [text, settext] = useState('')
  const [check, setcheck] = useState(false)
  return (
    <div className="App">
      <div>{count},{text}</div>
      <button onClick={() => { setcount(count + 1); console.log(count) }}>+1</button>
      <input value={text} onChange={(e) => settext(e.target.value)}></input>
      <label>
        <input
          type="checkbox"
          checked={check}
          onChange={() => { setcheck(!check) }}
        />
        我要去金山
      </label>
      <p>我{check ? '一定可以' : '绝对可以'}去金山</p>
    </div>
  );
}

export default App;

同样可以在组件中观测到添加的状态
在这里插入图片描述

4.更新对象

与上面大多相似，知识通过set函数利用展开运算符展开对象，然后通过修改对应属性的值来改变对象

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [count, setcount] = useState(0)
  const [text, settext] = useState('')
  const [check, setcheck] = useState(false)
  const [object, setobject] = useState({
    name: 'zwb',
    age: '22'
  })
  return (
    <div className="App">
      <div>{count},{text}</div>
      <button onClick={() => { setcount(count + 1); console.log(count) }}>+1</button>
      <input value={text} onChange={(e) => settext(e.target.value)}></input>
      <label>
        <input
          type="checkbox"
          checked={check}
          onChange={() => { setcheck(!check) }}
        />
        我要去金山
      </label>
      <p>我{check ? '一定可以' : '绝对可以'}去金山</p>
      <div>姓名：{object.name}，年龄：{object.age}</div>
      <button onClick={() => setobject({ ...object, age: '23' })}>更换对象</button>
    </div>
  );
}

export default App;