文章目录
前言
自react 16.7.0后,函数组件也有了状态,该版本之前只有class组件才会拥有状态,现在,react有了useState,似乎直接使用useState简单几行就可以做到class同样的事情。
一、useState简介
1.什么是useState
useState是React原生的Hook(钩子),它会接受一个参数,可以是基本数据类型(字符串。。)或者对象,然后返回一个数组,数组中包含两个结果,一个是你传入的参数,另一个是修改此参数的方法。
2.为什么使用useState
React 16.7.0之前函数组件一直是无状态组件,而此版本后,函数组件也可以存储并改变状态,而useState的出现就是函数组件管理状态的一种工具。
3.命名
useState使用框架:
var [xx,setxx]=useState(...)
即通常情况下,我们定义用什么表示其返回的第一个参数,就用set+xx表示改变其状态的方法。
二、实例
import React,{Component,useState} from 'react'
function Text() {
var [str,setStr]=useState("abs")
return(
<div>
<p>{str}</p>
<button onClick={()=>{setStr("11111")}}>Change</button>
</div>
)
}
class App extends Component{
render(){
return(
<div>
<Text></Text>
</div>
)
}
}
export default App;
页面初始化显示”abs“
点击后改变: