const El = () => {
    let index = 0
    const plus = () => {
        index++
    }
    return (
        <button onClick={plus}>
            {index}
        </button>
    )
}

在页面上我们点击按钮来更新数据，但是页面并没有更新

有两件事阻止了这种变化：

1.局部变量在渲染之间不会持续存在，当 React 第二次渲染这个组件时，它会从头开始渲染它——它不考虑对局部变量的任何更改。

2.局部变量的更改不会触发渲染。React 没有意识到它需要使用新数据再次渲染组件。

这时我们可以使用useState,useState提供了这两件事：

1.用于在渲染之间保留数据的状态变量。

2.一个状态设置函数，用于更新变量并触发 React 再次渲染组件。

const [index,setIndex] = useState(0)

useState具有一个参数，就是状态变量的初始值

useState提供一个包含两个值的数组：

1.状态变量-useState的初始值

2.一个更新状态变量的函数，并触发 React 再次渲染组件

useState是组件私有的，多次渲染同一组件状态互不影响