react的hooks的用法详解

更新时间：2020年10月12日 11:28:41 作者：圣京都

这篇文章主要介绍了react的hooks的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

hooks的作用

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

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用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

react
hooks

ahooks控制时机的hook实现方法
这篇文章主要为大家介绍了ahooks控制时机的hook实现方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
详解react服务端渲染（同构）的方法
这篇文章主要介绍了详解react服务端渲染（同构）的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
React-RouterV6+AntdV4实现Menu菜单路由跳转的方法
这篇文章主要介绍了React-RouterV6+AntdV4实现Menu菜单路由跳转,主要有两种跳转方式一种是编程式跳转另一种是NavLink链接式跳转，每种方式通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
react-native弹窗封装的方法
这篇文章主要为大家详细介绍了react-native弹窗封装的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
关于react中的常见错误及解决
这篇文章主要介绍了关于react中的常见错误及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
快速搭建React的环境步骤详解
本篇文章主要介绍了快速搭建React的步骤详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
React Navigation 路由传参的操作代码
这篇文章主要介绍了React Navigation 路由传参,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
react组件从搭建脚手架到在npm发布的步骤实现
这篇文章主要介绍了react组件从搭建脚手架到在npm发布的步骤实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
React实现多个场景下鼠标跟随提示框详解
这篇文章主要为大家介绍了React实现多个场景下鼠标跟随提示框详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
react中代码块输出,代码高亮显示,带行号,能复制的问题
这篇文章主要介绍了react中代码块输出，代码高亮显示，带行号，能复制的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09