React Hook - useState函数的详细分析

显示全部楼层 · 2023-8-23 11:57:21

useState的详细分析

在上一篇文章中, 我用到useState来让各人体验一下hooks函数

import { memo, useState } from "react"
const Counter2 = memo(() => {
const [counter, setCounter] = useState(100)
return (
<div>
<h2>当前计数: {counter}</h2>
<button onClick={() => setCounter(counter - 1)}>-1</button>
<button onClick={() => setCounter(counter + 1)}>+1</button>
</div>
)
})
export default Counter2

复制代码

那么接下来我们来先研究一下上面核心的一段代码代表什么意思
useState来自react，需要从react中导入，是一个hook函数, 官方中也将它成为State Hook, 它与class组件内里的 this.state 提供的功能完全雷同;
一般来说，在函数退出后变量就会”消散”，而 state 中的变量会被 React 保留。
useState只有一个参数: 吸收一个初始化状态的值(设置初始值)，在第一次组件被调用时利用来作为初始化值(假如不设置则默以为undefined);
useState的返回值: 返回一个数组，数组包罗两个元素;

元素一: 当前状态的值(第一次调用为初始化值);
元素二: 是一个设置状态值变化的函数;
不外我们假如总是利用索引来获取这两个元素总是不方便的, 因此在开发中我们通常是会对数组举行解构(固然要取什么名字是自界说的)
比方上面代码: const [counter, setCounter] = useState(100)

上面代码中, 点击button按钮后，会完成两件变乱:
   调用元素二: setCounter，设置一个新的值;
组件重新渲染，而且根据新的值返回DOM布局;
相信通过上面的一个简单案例，你已经会喜好上Hook的利用了。
Hook 就是 JavaScript 函数，这个函数可以帮助你钩入(hook into) React State以及生命周期等特性;
  但是利用它们会有两个额外的规则:
只能在函数组件的顶层调用 Hook。不能在循环语句、条件判断语句大概子函数中调用。
  只能在 React 的函数组件和自界说hook中调用 Hook。不能在其他 JavaScript 函数中调用。
  Tip
Hook 指的类似于useState、这样的某一个函数
  Hooks 是对这一类函数的统称
  各人大概有疑惑: 为什么叫 useState 而不叫 createState?
“create” 大概不是很正确，因为 state 只在组件初次渲染的时间才会被创建。
  在下一次重新渲染时，就已经不是创建了, useState 会返回给我们当前所保存的state(假如每次都创建新的变量，它就不是 “state”了)。
  这也是 Hook 的名字总是以 use 开头的一个缘故原由, 因为你总是在利用而不是创建。
  固然，我们也可以在一个组件中界说多个变量和复杂变量(数组、对象)

import React, { memo, useState } from 'react'
const App = memo(() => {
// 简单数据
const [counter, setCounter] = useState(10)
const [message, setMessage] = useState("Hello World")
// 复杂数据
const [banners, setBanners] = useState(["aaa", "bbb", "ccc"])
const [infos, setInfos] = useState({
name: "chenyq",
age: 18,
height: 1.88
})
function changeNumber() {
setCounter(counter + 1)
}
return (
<div>
<h2>{counter}</h2>
<button onClick={changeNumber}>+1</button>
<h2>{message}</h2>
<h2>{banners}</h2>
<h2>{infos.name}-{infos.age}-{infos.height}</h2>
</div>
)
})
export default App

复制代码

来源：https://blog.csdn.net/m0_71485750/article/details/126799388
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

[web教学] React Hook - useState函数的详细分析