个人中心
gpt4 book ai didi

react的hooks的用法详解

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章react的hooks的用法详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

hooks的作用 。

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

useState 。

?
1
2
3
4
5
6
// 声明状态
const [ count , setCount ] = useState(0);
 
// 使用状态
<p>You clicked {count} times</p>
<button onClick={()=>{setCount(count+1)}}>click me</button>

useEffect 。

一个参数 。

?
1
2
3
useEffect(()=>{
  console.log( "首次渲染与更新" )
})

模拟: componentDidMount componentDidUpdate 。

一个参数带return 。

?
1
2
3
4
useEffect(()=>{
  console.log( "首次渲染与更新" )
return ()=>{console.log(首次卸载)}
})

 模拟

  • componentDidMount
  •  componentDidUpdate

return 。

  •  componetWillUnmount
  •  componentDidUpdate

第二个参数是空数组,return 。

?
1
2
3
4
useEffect(()=>{
  console.log( "首次渲染与更新" )
return ()=>{console.log(首次卸载)}
},[])

相对于生命周期的componentDidMount和componetWillUnmount 。

第二个参数是具体的值 。

?
1
2
3
4
useEffect(()=>{
  console.log( "首次渲染与更新" )
return ()=>{console.log(首次卸载)}
},[num])

模拟 。

  • componentDidMount
  • componentDidUpdate(update只对num有用)

return 。

  •  componetWillUnmount
  •  componentDidUpdate(update只对num有用)

useRef 。

?
1
2
3
4
const inp = useRef( null )
<input ref={inp}>
//调用
inp.current.value

自定义hook 。

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

处理:

?
1
2
3
4
5
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用法内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://blog.csdn.net/qq_40994735/article/details/108985271 。

最后此篇关于react的hooks的用法详解的文章就讲到这里了,如果你想了解更多关于react的hooks的用法详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： EasyC++，Protected关键字
文章推荐： 微信幽默表情包大全超级搞笑 舔狗没有情人节
文章推荐： 详解三种Javascript图片预加载的方法
文章推荐： 2022全新可爱的金钱豹表情合集 热门暴富发财的金钱豹表情大全
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com