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 相关文章推荐
利用毫秒减值计算时长的js代码
Sep 22 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
通过实践编写优雅的JavaScript代码
May 30 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 FTP类的详解
2013/06/13 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
深入理解Python变量与常量
2016/06/02 Python
Python paramiko模块的使用示例
2018/04/11 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
keras得到每层的系数方式
2020/06/15 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
Python与C/C++的相互调用案例
2021/03/04 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
门前三包责任书
2014/04/15 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书