内置Hooks（1）：useState

React提供的Hooks一共只有10个，比如useSate、useEffect、useCallback、useMemo、useRef、useContext等等。

useState：让函数组件具有维持状态的能力
我们已经知道state是React组件的一个核心机制，那么useState这个Hook是用来管理state的，它可以让函数组件具有维持状态的能力。也就是说，在一个函数组件的多次渲染之间，这个state是共享的。

import React, {useState} from 'react';

function Example() {
    // 创建一个保存count的state,并给初始值0
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{ count }</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    )
}

export default Example;

1. useState(initalState) 的参数initalState是创建state的初始值，它可以是任意类型，比如数字、对象、数组等等。
2. useState() 的返回值是一个有着两个元素的数组。第一个数组元素用来读取state的值，第二个则是用来设置这个state的值。
3. 如果要创建多个state，那么需要多次调用useState。比如要创建多个state，使用代码如下：

// 创建一个保存count的state,并给初始值0
const [count, setCount] = useState(0);
// 定义一个年龄的state,初始值是12
const [age, setAge] = useState(12);
// 定义一个水果的state,初始值是banana
const [fruit, setFruit] = useState("banana");

可以说，state是React组件非常重要的一个机制，那么什么样的值应该保存在state中呢？
通常来说，我们要遵循一个原则就是：state中永远不要保存可以通过计算得到的值， 比如说：

1. 从props传递过来的值。有时候props传递过来的值无法直接使用，而是要通过一定的计算后再在UI上展示，比如说排序。那么我们要做的就是每次用的时候，都重新排序一下，或者利用某些cache机制，而不是将结果直接放到state里。
2. 从URL中读到的值。比如有时候需要读取URL中的参数，把它作为组件的一部分状态。那么我们可以在每次需要用的时候从URL中读取，而不是读出来直接放到state里面。
3. 从cookie、localStorage中读取的值。通常来说，也是每次要用的时候直接读取，而不是读出来放到dtate里。