React-18函数式组件---useState()钩子函数
useState()
是React 18中引入的一个新的Hook,它用于在函数式组件中添加状态。这个状态是函数组件的本地状态,不是像类组件中的this.state
。
useState()
接收一个参数,即初始状态,并返回一个数组,其中包含两个元素:当前状态值和用于更新状态的函数。
下面是一个简单的例子,展示如何在函数式组件中使用useState()
:
import React, { useState } from 'react';
function ExampleComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default ExampleComponent;
在这个例子中,ExampleComponent
是一个函数式组件,它使用useState()
来跟踪用户点击的次数。useState(0)
初始化状态count
为0。setCount
是一个函数,用于更新count
的值。当按钮被点击时,setCount
会被调用,并传入一个新的值来更新count
。
评论已关闭