深度理解react的useState()

理解并使用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的方法'