千锋教育2022版React全家桶教程_react零基础入门到项目实战完整版

useState使用时需要通过react引入

import React, { useState } from 'react'

返回值是是一个数组，第一个元素是状态（初始值默认是传入参数），第二个元素是改变状态的函数

const obj = useState("aaa")
 console.log("obj", obj);

匿名函数可以抽出放到外面，setStr改变状态的函数不能放在return前面，否则会死循环；就像setState不能放在render之内，return之前一样

const changeHandler = () => {
   setStr("bbb")
}
<button onClick={changeHandler}>修改</button>

不能直接赋值给状态，会报错：不能给常量赋值变量

str = "yyy"

set改变状态的函数也是一个异步的，调用此函数后打印当前状态，还是显示更新之前的状态

const [text, setText] = useState("")

 const inputHandle = (e) => {
   setText(e.target.value) //输入u
   console.log("text", text); //打印初始值空字符串
 }

不过调用setText方法会重新渲染，函数会再调用一次。因此在function内 return之前会得到更新后的值

console.log("text", text); //输入框内输入u,此处会打印u

 return ()

想在数组上新增，操作原数组会失效

const addHandle = (e) => {
 list.push(text)
  setList(list) //失效
}

先在原数组上新增，再把原数组的复制版本赋值给set函数倒是可以生效

const addHandle = (e) => {
   list.push(text)
  setList([...list])
}

把新数组当作参数传给函数也可以生效

const addHandle = (e) => {
   let newList = [...list, text]
   setList(list)
 }

如果某些函数需要传参，就得把匿名函数写在标签内了

{list.map((item, index) => {
 return <div key={item}>
  {item}
  <button onClick={() => {
    delHandler(index)
  }}>删除</button>
 </div>
})}

如果数组为空，就显示“暂无列表”，这是if的简写

{!list.length && <div>暂无列表</div>}