React Hooks { useState, useEffect }

React Hooks

使用状态

UseState 钩子是在 React 16.8 中引入的。它允许您跟踪状态功能组件。你可能会问自己什么状态？好吧，状态通常是指组件中的动态数据，随着用户与您的应用程序交互，它会随着时间而变化。与组件道具不同的状态会随着时间而改变。让我们深入研究一个示例，以更好地了解如何以及何时使用状态！

首先我们需要导入 useState 钩子

如何初始化 useState 挂钩

我们通过调用组件中的 useState 钩子来初始化我们的状态。

useState 接受初始状态并返回两个值：

1. 当前状态。
2. 更新状态的函数。

让我们看一个例子来更好地理解……

当前状态称为计数。

setCount 将是我们的 setter 函数，它将更新状态。

我们将初始状态设置为 0。 这可以更改为任意数量的东西，包括字符串、数字、布尔值、数组、对象。在这种情况下，我们只是将状态增加 1。

更新状态

快速回顾

1. 我们从 react 中导入了 useState 钩子。
2. 我们将 useState 设置为当前值初始化为 0。
3. setCount 这将是我们的 setter 函数。

好的，现在我们正在更新我们的状态。首先，我声明了一个函数并在该函数中调用它增量，我调用了我们的 setter 函数 setCount 并传入初始状态 0 因为 count 值现在是 0 然后 +1 所以每次调用 setCount 时它都会取state 的值和 state 的任何数字都会 +1。

示例：如果我们单击一次按钮状态将更新为 1 而不是零，再次单击按钮当前状态将是 2，依此类推。

state 的当前值为 0，并根据我们单击按钮的次数增加 1，这是我们的应用程序在浏览器中显示的示例。

使用效果

useEffect 允许您在组件中执行副作用。

副作用： 如果操作、函数或表达式在其本地环境之外修改了一些状态变量值，则称其具有副作用，也就是说，除了将值（主效果）返回给操作。 — 维基百科的副作用

React 组件的主要作用是返回 JSX，但是有时我们希望组件除了返回 JSX 之外还执行一些副作用，例如：

1. 组件首次呈现时从 API 获取数据
2. 启动/停止计时器
3. 直接更新 DOM

如何使用 useEffect 挂钩

首先我们必须导入 useEffect 钩子。

然后我们调用 useEffect 并传入一个回调函数以作为副作用运行，在这种情况下，setTimeout 将每 1,000 毫秒将 setCount（setter 函数）设置为我们的 count + 1。

我们基本上是在说，当这个组件呈现时，我希望我的计数每秒自动增加一。

UseEffect 依赖项

在上面的代码片段中，我们没有传递任何依赖项，因此效果将每 1,000 毫秒渲染一次，除非我们传递其中一个依赖项...

我们传入一个空数组作为依赖项，这意味着这个效果只会在第一次渲染时运行。

 使用效果（（）=> {  
 设置超时（） => {  
 设置计数（计数 + 1）；  
 },1000)  
 }，[]）：

在这个例子中，useEffect 将在第一次渲染时运行，并且任何时候任何依赖值发生变化。

 使用效果（（）=> {  
 设置超时（） => {  
 设置计数（计数 + 1）；  
 },1000)  
 }，[道具，状态]）；  

[

反应使用效果

useEffect Hook 允许您在组件中执行副作用。副作用的一些示例是：获取...

www.w3schools.com

](https://www.w3schools.com/react/react_useeffect.asp)

[

反应使用状态钩子

React useState Hook 允许我们跟踪函数组件中的状态。状态通常是指数据或属性……

www.w3schools.com

](https://www.w3schools.com/react/react_usestate.asp)

[

使用状态钩子 - React

Hooks 是 React 16.8 中的新增功能。它们让您无需编写类即可使用状态和其他 React 特性。这…

reactjs.org

](https://reactjs.org/docs/hooks-state.html)

[

React 中的 useState() 是什么？ - GeeksforGeeks

useState() 是一个 Hook，它允许您在功能组件中拥有状态变量。所以基本上 useState 是……

www.geeksforgeeks.org

](https://www.geeksforgeeks.org/what-is-usestate-in-react/)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/18672/25120610