目 录CONTENT

文章目录

React-React State Hook

恪晨
2021-01-27 / 0 评论 / 0 点赞 / 750 阅读 / 1 字 / 正在检测是否收录...
温馨提示:
慢慢看,慢慢读,不行就边听歌边读

state Hook

  State Hook用于在函数组件中声明变量。在函数组件中,可以使用useState进行变量声明,通过const [count, setCount] = useState(0);进行声明,等价于class组件中的this.state = {count:0},在读取时可以直接通过{count}进行读取。

声明state变量

  • 调用 useState 方法的时候做了什么?
    定义了state变量,因为useState其实相当于封装了this.state={},二者功能是完全相同的;

  • useState需要哪些参数?
    useState() 方法里面唯一的参数就是初始 state,在class组件中我们需要设置初始值的话必须将一个对象赋值给this.state,但是useState中只需要将要设置的值作为它的参数即可;

  • useState方法返回什么?
    返回值为:当前 state 以及更新 state 的函数。这也是写成 const [count, setCount] = useState() 的原因,这与 class 里面 this.state.count 和 this.setState 类似,唯一区别就是你需要成对的获取它们;

      import React, { useState } from 'react';
      function Example() {
          const [count, setCount] = useState(0); // 设置初始值,解构赋值
          return (
              <div>
                  <p>You clicked {count} times</p>
                     // 通过setCount直接改变state中count的值 
                     <button onClick={() => setCount(count + 1)}>
                     Click me
                    </button>
                  </div>
              );
          }
    

读取state

  • class组件
    在使用class组件时获取state需要使用this.state.xxx即可,如
    ```javascript

    You clicked {this.state.count} times

```
  • Hook组件
    但是在hook中,因为使用了useState定义了state变了,则可以直接使用即可,如
    ```javascript
    const [xxx, setXxx] = useState(0);

    You clicked {xxx} times

```

更新state

  • class组件
    在使用class组件时更新state需要使用this.setState({xxx: 111})即可,如

     <button onClick={() => this.setState({ xxx: this.state.xxx + 1 })}>
       Click me
     </button>
    
  • Hook组件
    但是在hook中,使用useState定义的setXxx即可修改state值,如

       const [xxx, setXxx] = useState(0);
       <button onClick={() => setXxx(xxx + 1)}>
           Click me
       </button>
    

[]的作用

     const [xxx, setXxx] = useState(0);

在使用useState时,其实是同时创建两个变量,一个xxx,一个setXxx,并通过解构形式解构出来,等同于

     const data = useState('banana'); // 返回一个有两个元素的数组,初始化为banana
     const xxx = data[0]; // 数组里的第一个值, 即banana
     const setXxx = data[1]; // 数组里的第二个值,即setXxx函数

使用多个state变量

  • class组件
    在class组件中,如果定义多个state变量,则需要
       this.state = {
           aaa: 111,
           bbb: 222,
           ccc: 333
       };
    
在需要更新state时,使用setState
 ```javascript
    this.setState({
        aaa: 444,
        bbb: 555,
        ccc: 666
    })
 ```
  • Hook组件
    而在hook中,定义多个state变量,则通过多个useState进行定义即可
    javascript const [aaa, setAaa] = useState(111); const [bbb, setAaa] = useState(222); const [ccc, setAaa] = useState(333);
    在进行更新state时则需要通过每个单独的set方式进行更新
    javascript setAaa(444) setBbb(555) setCcc(666)
0
博主关闭了当前页面的评论