数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时装学
法律学ReactJS – useState 钩子
在本文中，我们将了解如何在函数式组件中使用 useState 钩子。
State 是数据来源的地方。我们应该始终努力让 state 尽可能简单。使用 React 16.8，发布了允许我们以更少的编码来处理 state 的钩子。
语法
const [state, setState] = useState(initialstate)
它接受两个参数——state 和 setState。State 是当前 state，而 setState 用于更改函数式组件的 state。
在每次 state 更改时，组件都会使用更新后的 state 重新渲染。
示例
在此示例中，我们将构建一个 React 应用程序，该应用程序在单击按钮时会更改某个函数式组件的 state，并重新渲染它。
App.jsx
import React, { useState } from 'react';
function App() {
const [click, setClick] = useState(0);
return (
<div>
<p>Button clicked {click} times</p>
<button onClick={() => setClick((prev)=> prev + 1)}>Click me</button>
</div>
);
}
export default App;在上示例中，对象 state 可通过以下两种方法更改 -
setClick((prev)=>prev + 1)}
setClick(click + 1)}
在第二个选项中，状态通过将值增加 1 来更新，但这并不能确保值被添加到之前更新的状态中。而在第一个选项中，确保值仅添加到之前更新的状态值。
输出
这将产生以下结果。
更新于： 19-Mar-2021
356 次浏览
广告