前端开发如今有一个很重要的思想就是数据驱动视图,数据发生变化使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()方法,他返回一个数组,然后我们使用的方式,数组解构,两个参数第一个参数是值,第二个参数是改变第一个参数的值,并且第二个参数是一个方法。