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