React Hook，便捷且功能强大

useState基础使用

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

import {useState} from 'react'
function App () {
    //累加运算
    const [count,setCount] = useState (0)
    return(
        <div>
            <button onclick={()=setCount (count + 1)}>{count}</button>
        </div>
    )
}

useState状态的读取和修改

const [count,setCount] = useState(0)

1,useState传过来的参数,作为count的初始值
2.[count,setCount] 这里的写法是一个解构赋值
useState返回值是一个数组
- 名字可以自定义吗？->可以自定义保持语义化
- 顺序可以换吗？->不可以的第一参数就是数据状态,第二个参数就是修改数据的方法
3.setCount函数作用:用来修改count,依旧保持不能直接修改原值还是生成一个新值替换原值
- setCount(基于原值计算得到的新值)
4.count和setCount是一对是绑在一起的setCount只能用来修改对应的count值

useState组件更新过程

组件的更新 - 当调用setCount的时候更新过程

首次渲染

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

更新渲染 //setCount都会更新

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

重点一句话：

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

useState注意事项

1.只能出现在函数组件中

2.不能嵌套在if/for/其它函数中(react按照hooks的调用顺序识别每一个hook)

let num 1
function List(){
    num++
    if(num/2==6){
    const[name,setName]=useState("cp')
}
    const [list,setList]useState([])
//俩个hook的顺序不是固定的，这是不可以的！！！

3.可以通过开发者工具查看hooks状态

useEffect “定义副作用”

这个hook可以代替类组件中的生命周期函数

依赖项控刺副作用的执行时机

1.默认状态（无依赖项）
组件初始化的时候先执行一次等到每次数据修改组件更新再次执行
2.添加一个空数组依赖项
组件初始化的时候执行一次
1
2
3
useEffect(() =>{
console.log('副作用执行了")
},[])
3.添加特定依赖项

组件初始化的时候执行一次依赖的特定项发生变化会再次执行

function App(){
    const[count,setCount]=useState(0)
    const [name,setName]useState('zs')
    
    useEffect(()=>{
        console.log('副作用执行了')
    },[count])

    return(
        <>
        <button onClick=()=>{setCount(count 1)}}>{count)</button>
        <button onClick=()=>{setName('cp')}}>{name}</button>
        </>
    )
}