在这个故事中,我们将 介绍 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
- useState()
- useEffect()
- useContext()
附加Hooks
- useReducer()
- useRef()
- useCallback()
- useMemo()
还有一些附加的 React hook,但以上提到的就已经足够用了。
什么是useState?
-
useState 是最常见和最常用的 React hooks之一。
-
useState 用作特定组件的 状态管理 hooks 。
-
useState hook用于 处理 我们组件 的状态 。
-
useState 允许我们轻松方便地 创建 和 处理状态变量 。
-
在 useState 中,我们设置状态变量的 初始状态 ,并使用 useState 定义的函数 将该状态变量的 状态 从 初始状态 更改为 当前状态 。
-
我们只能在 功能组件中 使用 useState , 而不能在 基于类的组件中使用 。
-
useState与React基于类的组件中的
this.state
和this.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;
- 代码说明 —
-
在此代码行中,我们从
‘react’
中导入useState
函数。 -
之后,我们将在APP文件中创建功能组件
App
。 -
在该功能组件中,我们将创建名为
count
的状态变量 和名为setCount
的useState 函数。 -
在这段代码的 第 6 行,我们使用了 useState hook,我们在其中调用了状态变量
count
,为了改变计数的状态,我们创建了一个名为setCount
的函数。 -
这里在
useState(0)
0 中表示count
状态变量的初始状态。所以一开始我们App组件加载count
状态变量的值会是 0。并且使用setCount
法能够改变count
状态变量的值。 -
现在我们已经创建了一个被调用的方法
decreament
,每当我们点击 (decreme nt -)按钮时,它都会将状态变量count的值减少1 。基本上这个方法的作用是使用setCount方法将count变量的状态设置为count-1。 -
现在我们已经创建了方法
increament
,每当我们点击 (increment +) 按钮时,它都会将状态变量count
的值增加 1 。基本上这个方法的作用是用setCount
方法 将count
变量的状态设置为count+1
。 -
这段代码的return部分是显而易见的 ,在onClick事件中,我们在increment+按键中传递了increment方法,在decrement-按键中传递了decrement方法。
你还可以将状态变量和 useState 函数( 此代码中的 setCount )作为道具传递给其他组件。因此,你也可以从子组件更改或设置父组件的状态。
结论
所以,在本文中,我们已经介绍了 React hooks 的 基础知识,什么是 useState hook,它的工作原理, 以及 实现方法 。
希望大家喜欢本篇文章,并多多分享。
原文作者 Nandit Shah
原文链接 https://javascript.plainenglish.io/introduction-to-react-hooks-usestate-f39c6743a484