React [ Basic Hooks ] useState 基础使用

State Hook

state 状态

state 只在组件首次渲染的时候创建赋值。 下一次渲染的时候，useState 返回的是当前的 state。

声明 state

class 组件

class Example extends React.Component {
 constructor(props){
 	super(props);
 	this.state = {
 		count: 0
 	}
 }
}

函数组件

函数组件中没有 this ，不能分配或者读取 this.state。

函数推出后，变量会消失，而 state 中的变量会被 React 保留。

import React, { useState } from 'react';

function Example() {
    // 声明一个 count 的 state 变量。
    const [count, setCount] = useState(0)
}

读取 state

calss 组件

<p>You clicked {this.state.count} times</p>

函数组件

<p>You clicked {count} times</p>

更新 state

更新 state 应该是替换， 而不是合并。更新 state 会重新渲染组件。

在 class 中，我们需要调用 this.setState() 来更新 count 值：

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>
  	Click me
  </button>

在函数中，我们已经有了 setCount 和 count 变量，所以我们不需要 this:

  <button onClick={() => setCount(count + 1)}>
  	Click me
  </button>

理解 state

useState() 唯一参数就是初始的 state

useState() 的返回值是： 当前的 state 以及更新 state 的函数

语法：

// 利用[]数组解构语法
const [count, setCount] = useState(0);
// 初始语法 useState() 返回一个有两个元素的数组；
const countState = useState('vis');
let count = countState[0];
let setCount = countState[1];

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

如何更好的使用多个 state 变量？

首先 State 变量可以存储对象或者是数组，因此，可以把相关的数据分为一组。不要一股脑都塞进去一个对象或者数组：

官方FAQ: 我应该使用单个还是多个 state 变量？

State 变量总是替换不应该是合并