React Hooks中的useState

话说React16.8版本开始支持Hook，允许在Function Component中使用useState、useEffect、useRef、useMemo、useCallback和useReducer等等，以及根据不同业务需求自定义hook。

今天咱们聊一下useState（状态）

首先咱们先看一下class组件state状态的写法：

import React, { Component } from 'react'

class Demo extends Component {

  constructor(props) {
    super(props)
    this.state = {
      value: '学习useState'
    }
  }
  render() {
    const { value } = this.state;
    return (
      <div>{value}</div>
    )
  }
}

export default Demo;

其次咱们先看一下函数组件state状态的写法：

import React, { useState } from 'react';

const Demo = () => {
  const [value, setValue] = useState('学习useState');
  return (
    <div>{value}</div>
  );
};

export default Demo;

通过上面的对比，是不是很直观的看到函数组件简洁了很多呢？

接下来带大家做一个简单的小Demo看一下怎么使用useState。

import React, { useState } from 'react';

const Demo = () => {

  // count 相当于类组件中的state
  // setCount 相当于类组件中的this.setState()方法
  // 0 就是value的初始值，这个初始值可以是string、number、array、boolean等
  const [count, setCount] = useState(0);
  // button点击事件的回调函数
  const handleClick = () => {
    setCount(count + 1);
  }
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={handleClick}>点我+1</button>
    </div>
  );
};

export default Demo;

看完这个小Demo相信大家也对useState有所了解，那就再跟类组件做一下对比吧

import React, { Component } from 'react'

class UseStateDemo extends Component {

  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  // button点击事件的回调函数
  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <h2>{count}</h2>
        <button onClick={this.handleClick}>点我+1</button>
      </div>
    )
  }
}

export default UseStateDemo;

经过对比是不是发现类组件有大家很讨厌的this呢？没错，这就是类组件相对于函数式组件比较令人头疼的点，如果你选择了hooks以后就不用再去考虑这个问题。

到这里以后，可能有的小伙伴会有一个疑问，定义state怎么是一个方括号呢？方括号有什么用？

const [count, setCount] = useState(0);

这种 JavaScript 语法叫数组解构。它意味着我们同时创建了 count 和 setCount 两个变量，count 的值为 useState 返回的第一个值，useState 是返回的第二个值。它等价于下面的代码:

  const countStateVariable = useState('laozhao'); // 返回一个有两个元素的数组
  const count = countStateVariable[0]; // 数组里的第一个值
  const setCount = countStateVariable[1]; // 数组里的第二个值

当我们使用 useState 定义 state 变量时候，它返回一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数。使用 [0] 和 [1] 来访问有点令人困惑，因为它们有特定的含义。这就是我们使用数组解构的原因。

我们也可以定义使用多个state变量

const Demo = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('学习useState');
  const [age, setAge] = useState(25);
};

总结：

uesState是一个Hook函数，它让你可以在组件中拥有状态变量，你可以给这个方法传递初始值，并且返回一个当前状态值的变量（不一定是初始值）和另一个更新该值的方法。

下集预告：useEffect()副作用的使用。