在React中，当组件渲染完毕后，再修改组件中的变量，不会使组件重新渲染
- 要使得组件可以受到变量的影响，必须在变量修改后进行重新渲染state相当于一个变量，只是这个变量进行了注册
-React会监控这个变量，当state发生变化时，会自动触发组件的重新渲染
勾子函数：useState() //该函数在"react"包中
勾子：useState()函数
在函数组件中，我们需要通过钩子函数，获取state
import {useState} from 'react'
它需要一个值作为参数，这个值就是state的初始值
1 .该函数会返回一个数组
2 .数组中第一个元素，是初始值
- 初始值只用来显示数据，直接修改不会触发组件的重新渲染
3 .数组中第一个元素，是一个函数，通常会命名为 setXxx
- 这个函数用来修改state，调用其修改state后会触发组件的重新渲染
并且使用函数中的值作为新的state值
实例代码：
import './Addition.css'
import { useState } from 'react'
const Addition = () => {
let [counter,setCounter] = useState(1)
const addHandler = () => {
counter++
//此处触发组件的重新渲染
setCounter(counter)
console.log(counter);
}
const subtractHandler = () => {
counter--
//此处触发组件的重新渲染
setCounter(counter)
console.log(counter);
}
return <div className='container'>
<h3>{counter}</h3>
<div className='div1'>
<button className='btn' onClick={addHandler}>+</button>
<button className='btn' onClick={subtractHandler}>-</button>
</div>
</div>
}
export default Addition
useState函数的注意事项
state
- state实际就是一个被React管理的变量
当我们通过setState()函数修改变量的值时，会触发组件的自动重新渲染
- 只有当state值发生变化时，组件才会重新渲染
- 当state的值是一个对象时，修改时是使用新的对象去替换已有对象
- 当通过setState去修改一个state时，并不表示修改当前的state
它修改的是组件下一次渲染时的state值
- setState()会触发组件的重新渲染，它是异步的
所以当调用setState()需要用旧state的值时，一定要注意
为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值
即一个回调函数作为setState方法的唯一参数，该参数的返回值为新值
