当前位置: 首页 > 文档资料 > Rax 中文文档 >

useState

优质
小牛编辑
137浏览
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>
  );
}