React的函数式组件不同于类式组件,函数式组件没有自己的 this,看似没有操作state的能力
但是React官方提供了一个Hooks叫useState,它解决了函数式组件和类式组件的差异,让函数式组件拥有了类式组件所拥有的 state ,同时新增了一些 API ,让函数式组件,变得更加的灵活
例子:
function Demo() {const [count, setCount] = React.useState(0)console.log(count, setCount);function add() {setCount(count + 1)}return (<div><h2>当前求和为:{count}</h2><button onClick={add}>点我加1</button></div>)
}
export default Demo
这里利用了useState,让函数式组件能够维护自己的 state ,它接收一个参数,作为初始化 state 的值,赋值给 count。
我们可以看输出count和setCount的结果,我们可以理解为 setState 来使用:
count 是初始化的值,而 setCount 就像是一个 action 对象驱动状态更新,我们可以通过 setCount 来更新 count 的值
这里可能有人会有疑问,usestate不会在每次调用都把count赋0吗,答案是不会,它只会在count初始化时赋值为0.