React函数式组件改变状态useState()的用法

函数式组件主要使用 useState() 进行状态管理
如果页面中某个元素需要改变状态，必须进行以下步骤才能成功改变其状态
比如现在有一个需求，页面中有一个盒子，初始状态背景颜色是红色的，点击时会变成绿色，再点击又变回红色，就这样每次点击背景颜色都在红色和绿色之间切换。

1. 启用状态

• 从React中引入useState()函数

import {useState} from 'react'

2. 初始化状态

• 给盒子设置初始样式(宽度200px，高度200px)，这些在less文件里写着，可以忽略
• 使用useState()方法定义变量color以及改变此变量的函数changeBackgroundColor，并赋一个初始值为'red'的背景颜色
• 使用此变量<div style={{backgroundColor: color}}></div>

const App=()=>{
    const [color,changeBackgroundColor] = useState('red')
    return (
        <div className="app">
            <div style={{backgroundColor: color}}></div>
        </div>
    )
}

3. 根据需求更新状态
   需求是点击盒子改变背景颜色，所以绑定onClick事件

const App=()=>{
    const [color,changeBackgroundColor] = useState('red')
    const changeColor=()=>{
        changeBackgroundColor(color=='green' ? 'red' : 'green')
    }
    return (
        <div className="app">
            <div style={{backgroundColor: color}} onClick={changeColor}></div>
        </div>
    )
}

changeColor为点击盒子触发的函数，在此函数里面再调用changeBackgroundColor函数，这里用到了三元表达式，首先判断当前颜色——如果是绿色将其改变成红色，如果不是绿色将其改变成绿色即可，等价于

if(color=='red'){
	changeBackgroundColor('green')
}else{
	changeBackgroundColor('red')
}

综上所述，useState()函数中第一个变量是设置变量，第二个变量是改变变量。
函数式组件与类式组件更新状态略有不同，可参考我的另外一篇关于类式组件更新状态的文章进行对比。