React Hook - useState函数的详细解析

小咪咪 2023-10-02 21:00 7阅读 0赞

### 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