react的hooks的用法详解_javascript技巧

来源:脚本之家  责任编辑:小易  

www.zgxue.com防采集请勿采集本网。

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 实现和由来以及解决的问题详解如何对react hooks进行单元测试的方法React 使用Hooks简化受控组件的状态绑定记录一次完整的react hooks实践React Hooks的深入理解与使用

React Hooks 是 React 后期发展的趋势,虽2113然现在很多项5261目中没有用到,但是 Hooks 能提4102供更加便捷的开发方式,所以如果1653有时间自学 React Hooks,还是很有必要的,而且我们黑马程序员又相应的视频哦,当然要学呀。而且绕不过呀。新版的functional这种类型组件基本上需要使用hooks完成本回答被网友采纳内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解js中统计函数执行次数与执行时间
  • 基于javascript实现全国省市二级联动下拉选择菜单
  • javascript检测对象中是否存在某个属性判断方法小结
  • 排序算法的javascript实现与讲解(99js手记)
  • js下拉缓冲菜单示例代码
  • 微信小程序之页面拦截器的示例代码
  • javascript中统计textarea字数并提示还能输入的字符
  • javascript使用localstorage存储数据
  • 一个炫酷的bootstrap导航菜单
  • javascript function函数种类详解
  • React Hooks 要学吗?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptreact hooks 实现和由来以及解决的问题详解如何对react hooks进行单元测试的方法react 使用hooks简化受控组件的状态绑定记录一次完整的react hooks实践react hooks的深入理解与使用详解js中统计函数执行次数与执行时间基于javascript实现全国省市二级联动下拉选择菜单javascript检测对象中是否存在某个属性判断方法小结排序算法的javascript实现与讲解(99js手记)js下拉缓冲菜单示例代码微信小程序之页面拦截器的示例代码javascript中统计textarea字数并提示还能输入的字符javascript使用localstorage存储数据一个炫酷的bootstrap导航菜单javascript function函数种类详解js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js删除数组里的某个元素方法js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的js关闭当前页面(窗口)的几种方式javascript 个人笔记(没有整理,很乱)jsp基于bootstrap分页显示实例解析js仿支付宝填写支付密码效果实现多方框输微信小程序中button去除默认的边框实例代微信小程序scroll-view隐藏滚动条的方法详javascript中字符串拼接需注意的问题javascript sha512&sha256加密算法详解静态页面也可以实现预览 列表不同的显示方js实现百度搜索接口及链接功能实例代码javascript math对象和调试程序的方法分析
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved