useState 简单类型修改变量

useState是ReactHook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果。

在React中，状态被认为只是可读的，我们应该始终是替换它而不是修改它，直接修改状态不会引发视图更新

本质：和普通的js变量不同的是，状态变量一但发生变化，组件的视图UI也会发生变化（数据驱动视图）

useState() 括号里的值是初始值

import {useState} from 'react'

// useState实现一个计数器按钮

function App() {

  // 1、调用 useState添加一个状态变量

  //count 状态变量

  //setCount 修改状态变量的方法

  const [count,setCount] =useState(0)

  //2、点击事件回调

  const handleClick = ()=>{

    //作用：修改count值，重新使用新的count渲染UI

    setCount(count+1)

  }

  return (

    <div className="App">

      <button onClick={handleClick}>{count}</button>

    </div>

  );

}

 

export default App;