react中的数据驱动视图，useState（）的使用

小刘，刘不刘2024-05-23 17:13

前端开发如今有一个很重要的思想就是数据驱动视图，数据发生变化使ui发生变化，比如一个变量count，为0显示三个按钮，为1显示一个按钮，为2显示两个按钮。这就是一个简单的数据驱动视图。

import { useState } from 'react'



function App() {
  const [count, setCount] = useState(0)
  const handleClick = ()=>{
    setCount(count + 1)
  }

  return (
    <>
     

      <div>react</div>
      <button onClick={handleClick}>{count}</button>      
    </>
  )
}

export default App

这里用到了useState（）方法，他返回一个数组，然后我们使用的方式，数组解构，两个参数第一个参数是值，第二个参数是改变第一个参数的值，并且第二个参数是一个方法。