react hook的基础使用

1.useState

useState可以让函数组件拥有自己的一个状态,和class组件一样去控制组件内部数据的一个状态

下面是一个用按钮通过useState设置初始状态,根据点击事件来改变这个状态

importReact,{useState}from'react'

exportdefaultfunctionApp() {

const[state,setstate]=useState({

num:0,

   })    

constAddClickAction=()=>{

setstate({

num:state.num+1

       })

console.log(state);

   }

return(

//点击的时候增加

点我:{state.num}

   )

}

2.useRef

可以用来获取节点dom(节点标签)

importReact,{useRef}from'react'

exportdefaultfunctionApp() {

constref=useRef()

// 获取到button按钮的节点

constgetNode=()=>{

console.log(ref.current);

   }

return(

点我

   )

}

useRef的current属性是对原来的一个引用,可以用它来做判断,current属性值发生改变的时候他不会去重新走render,这个下面的useEffect模拟生命周期会有写到

3.useEffect

useEffect有俩个参数:

第一个参数是一个函数,里面可以去写一些数据操作或业务逻辑一些

第二个参数是对上一个函数的依赖,[] 空依赖则只有页面第一次加载的时候才会去执行,[有依赖的参数] 如果依赖函数中操作的某个数据,当依赖的数据发生改变的时候会去执行useEffect里面被依赖的代码,如果不写第二个参数,当页面重新走render会执行函数内部的所有代码

下面是对空依赖和不写依赖

importReact,{useEffect,useState}from'react'

exportdefaultfunctionApp() {

const[state,setstate]=useState(0);

// 我只会执行一次

useEffect(()=>{

console.log(state,"执行一次");//state 0

   }, [])

// 页面加载执行一次,当每次点击改变state数据的时候会继续执行

// 如果第二个参数不写的话函数内部执行的逻辑都会执行

useEffect(()=>{

console.log(state,"改变state就会执行一次");

}, [state])

constAddClickAction=()=>{

setstate(state+1);

   }

return(

点我:{state}