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.添加一个空数组依赖项
  组件初始化的时候执行一次

  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>
        </>
    )
}

注意事项
useEffect回调函数中用到的数据（比如，count)就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现