React/practise/31.hook/01.useState的基础使用.jsx

/* useState
1.导入 useState 函数 （从 react 导入）
2.执行这个函数并且传入初始值，必须在函数组件中
3.解构： [数据，修改数据的方法]
4.使用数据  修改数据 */

/*  状态的读取和修改
 const [count, setCount] = useState(0)
1.useState 传过来的参数作为 count 的初始值
2. [count, setCount] 这里的写法是一个解构赋值，useState 返回值是一个数组
3. [] 里面的值名字可以自定义，保持语义化
4. [] 里面的值顺序不能更换，第一个参数是数据状态，第二参数是修改数据的方法
5. setCount 函数作用用来修改 count, 依旧保持不能直接修改原值，要生成一个新值替换原值。setCount（基于原值计算得到的新值）
6. count 和 setCount 是一对的，绑定在一起的，setCount 只能用来修改对应的 count 值 */

/* 组件的更新
当调用 setCount 的时候，更新过程：

首次渲染：
首次被渲染的时候，组件的内部代码会被执行一次，其中 useState 也会跟着执行，重点注意：初始值只在首次渲染是生效

更新渲染 setCount 都会更新
1. app 组件会再次渲染，这个函数会再次执行
2. useState 再次执行，得到的新的 count 值不是 0 ，而是修改之后的 1，模板会用新值渲染 

重点：useState 初始值只在首次渲染生效，后续只要调用 setCount，整个 app 中代码都会执行，此时的 count 每次拿到的都是最新值
*/

import { useState } from 'react'

function App () {
    const [count, setCount] = useState(0)     // 0 是初始值
    return (
        <div>
            <button onClick={ () => setCount(count + 1)}>{count}</button>
        </div>
    )
}

export default App