useStateuseState和类组件的this.state一样，都是用来管理组件状态的。useState允许函数组件

useState和类组件的this.state一样，都是用来管理组件状态的。useState允许函数组件将自己的状态持久化到React运行时的某个地方，这样在组件每次重新渲染的时候都可以从这个地方拿到该状态，而且当该状态被更新的时候，组件也会重渲染。
useState接收一个initialState变量作为状态的初始值，返回值是一个数组。返回数组的第一个元素代表当前变量的最新值，第二个元素是一个用来更新变量的值的函数。

function App() {
  const [msg,setMsg]=useState("信息")//这里使用了解构赋值，相当于msg="信息"
  function change(){
    setMsg("信息修改了")//使用setMsg函数来修改msg的值实现响应式数据==>msg="信息修改了"
  }
  return (
    <>
 <p>{msg}</p>
 <button onClick={change}>点击</button>
 </>
  );
}

点击按钮之后页面动态刷新

用useState实现双向数据绑定

function App() {
  const [value1,setValue]=useState("")
  function change1(event){
    setValue(event.target.value)
  }
  return (
    <>
 <p>双向数据绑定：{value1}</p>
 <input type="text" onChange={change1}/>//输什么内容p标签就显示什么内容

 </>
  );
}

useState的initialState也可以是一个用来生成状态初始值的函数，这种做法主要是避免组件每次渲染的时候initialState需要被重复计算

const [state, setState] = useState(() => {
  const initialState = localstorge.getItem("fn")
  return initialState
})

setState是全量替代函数组件的setState和类组件的this.setState函数的一个重要区别是:

类组件是将当前设置的state浅归并到旧state的操作。而hook的setState函数则是将新state直接替换旧的state。因此我们在编写函数组件的时候，就要合理划分state，避免将没有关系的状态放在一起管理
setState没有回调函数

无论是useState还是类组件的this.setState都是异步调用的，也就是说每次组件调用完之后都不能立即拿到最新的state值。为了解决这个问题，类组件的this.setState允许通过一个回调函数来获取到最新的state值:

this.setState(newState, state => { console.log( state)})

函数组件的setState函数不存在这么一个可以拿到最新state的回调函数，不过我们可以使用useEffect来实现相同的效果.