React基础之useState

useState是一个ReactHook(函数)，它允许我们向组件添加一个状态变量，从而控制组件的渲染效果

import

{

useState

}

from

“react”

//使用useState实现计数器按钮

function

App

() {

//count

是状态变量

setcount

是修改变量的方法

const

[

count

,

setCount

]=

useState

(

0

)

//点击事件回调

const

handleClick

=()

=>

{

//

使用传入的新值修改

Count

，重现使用新的

count

来渲染

UI

setCount

(

count

1

)

}

return

(

<

div

className

=

“App”

<

button

onClick

=

{

handleClick

}

{

count

}

</

button

</

div

)

}

export default

App

修改状态的规则

状态不可变，状态是自读的，我们应该是替换它而不是修改它，直接修改状态不能引发视图更新

import

{

useState

}

from

“react”

//使用useState实现计数器按钮

function

App

() {

//count

是状态变量

setcount

是修改变量的方法

const

[

count

,

setCount

]=

useState

(

0

)

//点击事件回调

const

handleClick

=()

=>

{

//

我们直接修改这个值

count

++

setCount

(

count

)

//

是不会触发视图更新的

}

return

(

<

div

className

=

“App”

<

button

onClick

=

{

handleClick

}

{

count

}

</

button

</

div

)

}

export default

App

修改对象状态

对于对象类型的状态数据，应该传递一个set一个全新的对象来进行修改

import

{

useState

}

from

“react”

//使用useState实现计数器按钮

function

App

() {

//修改对象状态

const

[

form

,

setForm

]=

useState

({

name:

‘jack’

})

const

changeFOrm

=()

=>

{

//

错误的写法

// form.name=‘jorn’

//

正确的写法

setForm

({

…

form

,

name:

‘jorn’

})

}

return

(

<

div

className

=

“App”

<

button

onClick

=

{

changeFOrm

}

{

form

.

name

}

</

button

</

div

)

}

export default

App