脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react hooks用法

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实现Modal弹窗效果

    react实现Modal弹窗效果

    这篇文章主要为大家详细介绍了react实现Modal弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React-router中结合webpack实现按需加载实例

    React-router中结合webpack实现按需加载实例

    本篇文章主要介绍了React-router中结合webpack实现按需加载实例，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • React实现全局组件的Toast轻提示效果

    React实现全局组件的Toast轻提示效果

    这篇文章主要介绍了React实现全局组件的Toast轻提示效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 详解react如何在组件中获取路由参数

    详解react如何在组件中获取路由参数

    这篇文章主要介绍了详解react如何在组件中获取路由参数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 基于React实现表单数据的添加和删除详解

    基于React实现表单数据的添加和删除详解

    这篇文章主要给大家介绍了基于React实现表单数据的添加和删除的方法，文中给出了详细的示例供大家参考，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
    2017-03-03
  • 浅谈箭头函数写法在ReactJs中的使用

    浅谈箭头函数写法在ReactJs中的使用

    这篇文章主要介绍了浅谈箭头函数写法在ReactJs中的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 详解react内联样式使用webpack将px转rem

    详解react内联样式使用webpack将px转rem

    这篇文章主要介绍了详解react内联样式使用webpack将px转rem，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React+Ant Design开发环境搭建的实现步骤

    React+Ant Design开发环境搭建的实现步骤

    这篇文章主要介绍了React+Ant Design开发环境搭建的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • React中事件的类型定义方式

    React中事件的类型定义方式

    这篇文章主要介绍了React中事件的类型定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • React 数据获取与性能优化详解

    React 数据获取与性能优化详解

    这篇文章主要为大家介绍了React 数据获取与性能优化方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10

最新评论