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 的工作原理以及使用方式。


这就是我们要做的

  • 代码——
import {useState} from 'react'

function App() {
  
// Defining state-variable(count) and state-function(setCount) that will change the state of state variable
  const [count,setCount] = useState(0)
  
// Will decreament the count variable by one 
  const decreament = () => {
    setCount(count-1)
  }
  
// Will increament the count variable by one 
  const increament = () => {
    setCount(count+1)
  }
  return (
    <div className="App" style={{fontFamily:'sans-serif',textAlign:'center'}}>
      <h1>Counter using useState Hook</h1>
      <h3>Counter Value is {count}</h3>
      <button onClick = {increament} >Increament +</button>
      <button onClick = {decreament} >Decreament -</button>
    </div>
  );
}

export default App;
  • 代码说明 —
  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

推荐阅读
相关专栏
前端与跨平台
90 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。