深度理解react的useState()

小鱼儿 2022-11-16 01:28 217阅读 0赞

## **理解并使用react的useState** ##

1、为什么有了这个方法  
useState()是专门用在函数组件中的，因为函数组件本来是没有状态的组件，而类组件中可以通过 this.state和this.setState来更新组件状态，于是 React 16.8 就新增useState这个特性，用来提升函数组件的性能。

*  函数组件

import React, {  useState } from 'react';
    
    function ChangeAge() { 
      // 声明一个叫 "name" 的 state 变量
      const [name, setName] = useState(0);
    
      return (
        <div>
          <p>Your age is { age}</p>
          <button onClick={ () => setAge(23)}>
            Change age
          </button>
        </div>
      );
    }

*  等价的类组件的写法

class ChangeAge extends React.Component { 
      constructor(props) { 
        super(props);
        this.state = { 
          age: '0'
        };
      }
    
      render() { 
        return (
          <div>
            <p>Your age is { this.state.age}</p>
            <button onClick={ () => this.setState({  age: 23 })}>
             Change age
            </button>
          </div>
        );
      }
    }

2、使用方法

*  useState( intialState ）只有一个参数初始 state
 *  useState 方法的返回值是一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数。等效于下面代码：

var ageState = useState(23); // 返回一个有两个元素的数组
    var age = ageState[0]; // 数组里的第一个值
    var setAge = ageState[1]; // 数组里的第二个值

*  调用 useState 方法的时候做了什么： 它定义一个 “state 变量”。我们的变量叫age， 但是我们可以叫他任何名字，比如 apple，这是一种在函数调用时保存变量的方式。还声明了类似于setState 方法，我们的方法叫做setAge。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留

使用实例：

function Changename() { 
      // 声明一个叫 "name" 的 state 变量
      const [age, setAge] = useState(23);
    
      return (
        <div>
        { age}
        </div>
      );
    }

代码解析：

const [age, setAge] = useState(23);

这行使用useState的代码使用了es6的数组解构语法，我用下面的代码来解释：

const [age, setAge] = [23,'修改前面值23的方法']
    const age = 23
    const setAge = '修改前面值23的方法'