返回介绍

useState

发布于 2019-12-27 00:37:38 字数 884 浏览 1299 评论 0 收藏 0

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>
  );
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文