React-Hook（1）：useState

---

前言

自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“

点击后改变：