React中的函数组件使用useState

最新推荐文章于 2024-10-01 18:11:15 发布

原创

最新推荐文章于 2024-10-01 18:11:15 发布 · 497 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

React中的函数组件使用useState

一个组件的显示形态可以由数据状态和外部参数所决定，而数据就是state

当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用

举个例子

import { useState } from 'react'
const app = () => {
const [count,setCount] = useState(0)
function changeCount() {
  setCount(count => count++)
}
  return (
    <div>{count}</div>
    <button onClick={()=>changeCount}></button>
  )
}

通过点击按钮触发onClick事件，执行changeCount方法更新state状态，从而导致页面的视图更新。

如果直接修改count状态而不靠setCount，我们会发现页面不会有任何反应，但是state状态已经被改变了

这是因为React不像VUE2中调用Object.defineProperty数据响应式，或者VUE3调用Proxy监听数据变化

必须通过setCount方法来告知React组件state已经发生了改变

setCount有两种更新方式，举个例子：

import { useState } from 'react'
const app = () => {
const [count,setCount] = useState(0)
function changeCount() {
  setCount(count => count++)
}
function changeCount() {
  set