React Hooks 简介 — useState

1_eg5cQKJnw7j_Xcsq12HhfA

在这个故事中,我们将 介绍 React hook的基础知识, 并了解名为 useState() 的内置 React hook

#要求——

你应该了解 HTML、Javascript、 什么是 React 以及 它是如何工作 的。

如果你达到这些要求,那就 可以开始了

什么是 React Hooks?

  • React Hooks 是在 React 16.8 中引入的。
  • React hooks 是让你处理Web 应用程序 状态 的函数,它们让你可以轻松使用其他 React 功能,例如 componenDidMount()componenDidUpdate() , 而无需编写
  • 你只能在 功能组件中 使用 React hook,而不能在类定义的组件中使用。
  • 简单来说,我们可以将 React hook定义为 让你从功能组件 “hook” 到React 状态和生命周期特性的函数
  • 内置 React hook有很多类型——

基本Hooks

  1. useState()
  2. useEffect()
  3. useContext()

附加Hooks

  1. useReducer()
  2. useRef()
  3. useCallback()
  4. useMemo()

还有一些附加的 React hook,但以上提到的就已经足够用了。

什么是useState?

  • useState 是最常见和最常用的 React hooks之一。

  • useState 用作特定组件的 状态管理 hooks

  • useState hook用于 处理 我们组件 的状态

  • useState 允许我们轻松方便地 创建处理状态变量

  • 在 useState 中,我们设置状态变量的 初始状态 ,并使用 useState 定义的函数 将该状态变量的 状态初始状态 更改为 当前状态

  • 我们只能在 功能组件中 使用 useState , 而不能在 基于类的组件中使用

  • useState与React基于类的组件中的 this.statethis.setState 相同。

  • 不用担心,如果你对 state 和 useState 没有正确理解,通过一个代码示例你就能彻底明白了。

useState 的代码示例 —

在本节中,我将使用 useState hook 创建一个简单的 计数器, 以便你可以轻松了解 useState 的工作原理以及使用方式。

https://miro.medium.com/max/846/1*MF4pGpkaCXv24phXFQXgsQ.gif
这就是我们要做的

  1. 在此代码行中,我们从 ‘react’ 中导入 useState 函数。

  2. 之后,我们将在APP文件中创建功能组件 App

  3. 在该功能组件中,我们将创建名为 count 的状态变量 和名为 setCount 的useState 函数。

  4. 在这段代码的 第 6 行,我们使用了 useState hook,我们在其中调用了状态变量 count ,为了改变计数的状态,我们创建了一个名为 setCount 的函数。

  5. 这里在 useState(0) 0 中表示 count 状态变量的初始状态。所以一开始我们App组件加载 count 状态变量的值会是 0。并且使用 setCount 法能够改变 count 状态变量的值。

  6. 现在我们已经创建了一个被调用的方法 decreament ,每当我们点击 (decreme nt -)按钮时,它都会将状态变量count的值减少1 。基本上这个方法的作用是使用setCount方法将count变量的状态设置为count-1。

  7. 现在我们已经创建了方法 increament ,每当我们点击 (increment +) 按钮时,它都会将状态变量 count 的值增加 1 。基本上这个方法的作用是用 setCount 方法 将 count 变量的状态设置为 count+1

  8. 这段代码的return部分是显而易见的 ,在onClick事件中,我们在increment+按键中传递了increment方法,在decrement-按键中传递了decrement方法。

你还可以将状态变量和 useState 函数( 此代码中的 setCount )作为道具传递给其他组件。因此,你也可以从子组件更改或设置父组件的状态。

结论

所以,在本文中,我们已经介绍了 React hooks基础知识,什么是 useState hook,它的工作原理, 以及 实现方法

希望大家喜欢本篇文章,并多多分享。

原文作者 Nandit Shah
原文链接https://javascript.plainenglish.io/introduction-to-react-hooks-usestate-f39c6743a484