一、作用:
useState让函数式组件也可以处理状态。
二、格式:
1、定义状态:
const [状态名,更新状态的函数] = React.useState(初始值|函数);
如:
1)、基本类型的状态
声明一个新的叫做 “count” 的 state 变量,初始值为0 。
const [count, setCount] = React.useState(0); //useState函数返回的是数组
相当于类组件中的
this.state={
count :0
}
2)、引用类型的状态
const [person, setPerson] = React.useState({name: '张三疯', age: 18,sex:"女"})
const [person, setPerson] = React.useState(() => ({name: '张三疯', age: 18,sex:"女"}))
2、读取值:
{count}
{person.name} {person.age}
3、修改值:
setCount(5);
//对于引用类型,不能局部更新(即:不能只改某个属性),所以,需要使用扩展运算符先拷贝以前所有的属性
setPerson({
...person, //拷贝之前的所有属性
age:person.age+1,
name: '张四疯' //这里的name覆盖之前的name
})
注意:
首先,需要知道,函数式组件重新渲染时,会执行函数里的所有代码,
那么,当函数式组件重新渲染时,会不会再次把状态的值恢复成初始值呢?答案是:不会。后续组件重新渲染时,会使用最后一次更新的状态值
【官网解释: React 会确保 setState 函数的标识是稳定的,并且不会在组件重新渲染时发生变化 】
三、示例代码:
import React,{useState} from 'react';
function App() {
// 声明一个叫 "count" 的 state 变量
const [count,setCount] = useState(0); //在App组件重新后,useState 返回的第一个值将始终是更新后最新的 count。
return (
<div className="App">
<p>{count}</p>
<input type="button" value="测试" onClick={()=>{setCount(count+1)}} />
</div>
);
}
对应的函数class组件:
class App extends React.Component {
state = {
count:0
}
render = () => (
<div>
<p>{this.state.count}</p>
<input type="button" value="测试"
onClick={()=>this.setState({count:this.state.count+1})} />
</div>
)
}
我们之前把函数式的组件叫做“无状态组件”。但现在我们为它们引入了使用 React state 的能力
或者:
function App() {
const [person, setPerson] = React.useState({name: '张三疯', age: 18})
const onClick = () =>{
//setPerson不可以局部更新,如果只改变其中一个,那么整个数据都会被覆盖,所以,需要使用扩展运算符先拷贝以前所有的属性
setPerson({
...person, //拷贝之前的所有属性
age:person.age+1,
name: '张四疯' //这里的name覆盖之前的name
})
}
return (
<div className="App">
<p>name:{person.name}</p>
<p>age:{person.age}</p>
<input type="button" value="测试" onClick={onClick} />
</div>
);
}