useState是一个react hook函数,它允许我们向组件添加一个状态变量,从而控制影响组件的渲染结果
const [count,setCount] = useState(0)
- useState是一个函数,返回值是一个数组
- 数组的第一个参数是状态变量,第二个参数是set函数用来修改状态变量
- useState的参数将作为初始值
import { useState } from "react";
function App() {
// 1、调用useState添加一个状态变量count,初始值为0,setCount是更新状态变量的函数
const [count,setCount] = useState(0);
// 2、定义一个函数handleClick,点击按钮时,将count加1
const handleClick = () => {
setCount(count + 1);
}
return (
<div className="App">
<button onClick={handleClick}>{count}</button>
</div>
);
}
export default App;
对象和数组
import { useState } from "react";
function App() {
// 1、调用useState添加一个状态变量count,初始值为0,setCount是更新状态变量的函数
const [count,setCount] = useState(0);
// 2、定义一个函数handleClick,点击按钮时,将count加1
const handleClick = () => {
// 3、调用setCount更新状态变量,这个地方不能直接写count=count+1,因为只有调用setCount才能触发重新渲染
setCount(count+1);
}
// 对象的替换
const [form,setForm] = useState({name:'jack',age:'10'});
const handleFormClick = () => {
setForm({...form,name:'lily',age:'12'});
console.log('form:',form)
}
// 数组
const [list,setList] = useState([1,2,3]);
const handleListClick = () => {
const len = list.length + 1
setList([...list,len]);
}
return (
<div className="App">
<button onClick={handleClick}>{count}</button>
<button onClick={handleFormClick}>{'my name is '}{form.name}</button>
<button onClick={handleListClick}>{'check me list add one'}</button>
<ul>
{list.map(item => <li key={item}>{item}</li>)}
</ul>
</div>
);
}
export default App;
import { useState } from "react"
function MyApp() {
const [count,setCount] = useState(0)
const [person,setPerson] = useState({name: "John", age: 30}
const [arr,setArr] = useState([1,2,3])
const clickHandler = () =>{
setCount(count+1)
}
const changePersonHandler = () => {
setPerson({name: person.name+"1", age: person.age+1})
}
const popArr = () => {
setArr([...arr,6])
}
return (
<div>
<button onClick={clickHandler}>{count}</button>
<div>{person.name}, {person.age}</div>
<button onClick={changePersonHandler}>change person</button>
<ul>
{arr.map((item,index)=><li key={index}>{item}</li>)}
</ul>
<button onClick={popArr}>pop</button>
</div>
)
}
export default MyApp