useState
优质
小牛编辑
132浏览
2023-12-01
useState 接受初始状态作为参数,返回 stateful (有状态) 值,以及更新这个状态值的函数。它可以接受一个回调函数,该回调函数将获取当前状态作为参数。
每次调用 useState 都与一个组件配对,可以在一个函数组件内多次调用 useState 来获取多个独立的状态值。因为返回的setState的作用域不是单个组件,所以我们可以定义独立于组件的有状态行为。
在初始渲染的时候,返回的状态 (state) 与作为第一个参数 (initialState) 传递的值相同。
setState 函数用于更新 state (状态) 。它接受一个新的 state (状态) 值,并将组件排入重新渲染的队列。
import { useState } from 'rax';
const [state, setState] = useState(initialState);
setState(newState);
在后续重新渲染期间,useState 返回的第一个值将始终是应用更新后的最新 state(状态) 。
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}