react的hooks的用法详解


Posted in Javascript onOctober 12, 2020

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用法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 #Javascript
原生JavaScript实现弹幕组件的示例代码
Oct 12 #Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 #Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 #Javascript
Webpack5正式发布,有哪些新特性
Oct 12 #Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 #Javascript
移动端JS实现拖拽两种方法解析
Oct 12 #Javascript
You might like
php注销代码(session注销)
2012/05/31 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
JS 时间显示效果代码
2009/08/23 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
js实现简单的二级联动效果
2017/03/09 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
一月红领巾广播稿
2014/02/11 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2014年质检员工作总结
2014/11/18 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
采购员岗位职责范本
2015/04/07 职场文书
教师反邪教心得体会
2016/01/15 职场文书
小学音乐课教学反思
2016/02/18 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL