慧鸿网络-小白学习建站,编程,系统必看网站

当前位置:主页 > 编程 >

详细介绍下react的hooks用法

hooks的作用:

它改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松;它改变了一个状态组件的复用性,让组件的复用性大大增加。

详细介绍下react的hooks用法

useState

// 声明状态

const [ count , setCount ] = useState(0);

// 使用状态

<p>You clicked {count} times</p>

<button onClick={()=>{setCount(count+1)}}>click me</button>

useEffect

一个参数

useEffect(()=>{

 console.log("首次渲染与更新")

})

模拟:

componentDidMount componentDidUpdate

一个参数带return

useEffect(()=>{

 console.log("首次渲染与更新")

return ()=>{console.log(首次卸载)}

})

 模拟:

componentDidMount

componentDidUpdate

return

 

 componetWillUnmount

 componentDidUpdate

第二个参数是空数组,return

useEffect(()=>{

 console.log("首次渲染与更新")

return ()=>{console.log(首次卸载)}

},[])

相对于生命周期的componentDidMount和componetWillUnmount

第二个参数是具体的值

useEffect(()=>{

 console.log("首次渲染与更新")

return ()=>{console.log(首次卸载)}

},[num])

模拟

componentDidMount

componentDidUpdate(update只对num有用)

return

 

 componetWillUnmount

 componentDidUpdate(update只对num有用)

useRef

const inp = useRef(null)

<input ref={inp}>

//调用

inp.current.value

自定义hook

定义:const [size,setSize] = useState({height:xxx,width:xxx})

处理:

const onResize = ()=>{setSize({width:xxx,height:xxx})}

 useEffect(()=>{

监听事件 window.addEventListener(“resize”,onResize)

 return 移除监听()=>window.removeEventListener(“resize”,onResize)

 },[])

返回 return size

使用 const size = useWinSize()

到此这篇关于react的hooks的用法详解的文章就介绍到这了,如果想了解更多react hooks的用法知识,欢迎关注我们的jQuery教程栏目。

  • 上一篇:jquery使用小技巧,这些需要掌握
  • 下一篇:如何利用PHP实现上传图片功能?教你方法
  • 商务合作

    • 微信公众号
    • QQ交流1群
    • 手机版访问
    站内信 官方群 客服 二维码 返回顶部