useState使用時需要通過react引入

import React, { useState } from 'react'

返回值是是一個數組，第一個元素是狀態(tài)（初始值默認是傳入參數），第二個元素是改變狀態(tài)的函數

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

匿名函數可以抽出放到外面，setStr改變狀態(tài)的函數不能放在return前面，否則會死循環(huán)；就像setState不能放在render之內，return之前一樣

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

不能直接賦值給狀態(tài)，會報錯：不能給常量賦值變量

str = "yyy"

set改變狀態(tài)的函數也是一個異步的，調用此函數后打印當前狀態(tài)，還是顯示更新之前的狀態(tài)

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