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

时间: 2020-10-10

如何对react hooks进行单元测试的方法

写在前面 使用 react hook 来做公司的新项目有一段时间了,大大小小的坑踩了不少.由于是公司项目,因此必须要编写单元测试来确保业务逻辑的正确性以及重构时代码的可维护性与稳定性,之前的项目使用的是 react@15.x 的版本,使用 enzyme 配合 jest 来做单元测试毫无压力,但新项目使用的是 react@16.8 ,编写单元测试的时候,遇到不少阻碍,因此总结此篇文章算作心得分享出来. 配合 enzyme 来进行测试 首先,enzyme 对于 hook 的支持程度,可以参考这个 i

React Hooks的深入理解与使用

你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

React 使用Hooks简化受控组件的状态绑定

开始之前 阅读本文需要对以下几项有一定了解 ECMAScript 6 文章中大量用到了 ES6 语法,比如解构赋值和函数参数默认值.剩余参数.展开语法.箭头函数等. Hooks React 在 16.8 版本中推出了 Hooks,它允许你在"函数组件"中使用"类组件"的一些特性. React 本身提供了一些 Hooks,比如 useState.useReducer 等.通过在一个以"use"作为命名起始的函数中调用这些 Hooks,就得到了一个

记录一次完整的react hooks实践

写在前面 React在16.8版本正式发布了Hooks.关注了很久,最近正好有一个小需求,赶紧来试一下. 需求描述 需求很简单,部门内部的一个数据查询小工具.大致长成下面这样: 用户首次访问页面,会拉取数据展示.输入筛选条件,点击查询后,会再次拉取数据在前端展示. 需求实现 使用React Class Component的写法 如果使用以前的class写法,简单写一下,代码可能大概长成下面这样: import React from 'react'; import { Tabs, Input, R

React Hooks 实现和由来以及解决的问题详解

与React类组件相比,React函数式组件究竟有何不同? 一般的回答都是: 类组件比函数式组件多了更多的特性,比如 state,那如果有 Hooks 之后呢? 函数组件性能比类组件好,但是在现代浏览器中,闭包和类的原始性能只有在极端场景下才会有明显的差别. 性能主要取决于代码的作用,而不是选择函数式还是类组件.尽管优化策略有差别,但性能差异可以忽略不计. 参考官网:(https://zh-hans.reactjs.org/docs/hooks-faq.html#are-hooks-slow-b

jQuery 跨域访问解决原理案例详解

浏览器端跨域访问一直是个问题,多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明.yahoo js util 的方式解决二级域名跨域访问的问题. 时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了.好在,有jQuery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题...有必要记下来备忘, 跨域的安全限制都是指浏览

PyCharm License Activation激活码失效问题的解决方法(图文详解)

自己的小Python项目好几天没有写了,今天打开PyCharm准备继续写,突然发现之前的激活码被取消不能用了,本来激情满满的准备干活啦!之前搜的这个激活码本来说的是可以用到18年1月份的呢,哎-心情是崩溃的-如下图所示: 在经过一顿搜索挣扎之后,笔者终于找到解决方法,血条瞬间满了,满血复活有没有,开开心心的开始敲代码: 解决方法是在下面的网站找到的,我只是个搬运工,来具体写一下步骤,解决一下网站中网友的问题,网址如下:http://idea.lanyus.com/ 很多网友提问说,用了这里的激活

MySQL死锁问题分析及解决方法实例详解

MySQL死锁问题是很多程序员在项目开发中常遇到的问题,现就MySQL死锁及解决方法详解如下: 1.MySQL常用存储引擎的锁机制 MyISAM和MEMORY采用表级锁(table-level locking) BDB采用页面锁(page-level locking)或表级锁,默认为页面锁 InnoDB支持行级锁(row-level locking)和表级锁,默认为行级锁 2.各种锁特点 表级锁:开销小,加锁快;不会出现死锁;锁定粒度大,发生锁冲突的概率最高,并发度最低 行级锁:开销大,加锁慢;

React.Js添加与删除onScroll事件的方法详解

React简介 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. React的优势 解决大规模项目开发中数据不断变化变得难以操作的问题: 组件化开发,使得开发更加快速: 单向数据流,有利于找到问题: 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新:举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去: 前言 大家都可能会遇到这样的问题,那就是滚动事件

React Native学习之Android的返回键BackAndroid详解

前言 最近在学习使用 React Native开发,iOS搞完,开始适配安卓,由于木有接触过安卓,所以碰到了很多问题,第一个问题,安卓的返回键BackAndroid问题, 我写了一个工具类,来搞定,其中用到了java原生代码与js交互;好吧,下面开始正式内容: 上代码: // BackAndroidTool // 功能: "安卓手机上的返回键" // Created by 小广 on 2016-05-10 下午. // Copyright © 2016年 All rights rese

React入门教程之Hello World以及环境搭建详解

前言 React 是一个用于构建用户界面的 JavaScript 库.react主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).关注React也已经很久了,一直没能系统地深入学习,最近准备好好研究一下,并且亲自动手做一些实践. 不管是学习一门语言也好,还是学习一个框架也好,都是从最初的hello world程序开始的,今天我们也来用react写一个hello world出来,了解一下如何编写及运行React. 入门教程及环境搭建 在官方文档中,有一种方式是基于npm的,我

xcode8 关闭控制台不打印不信息的解决方法(图文详解)

控制台打印的信息如下 2016-10-15 10:13:17.774543 LGLSearch-Dome[1656:356106] subsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 1, privacy_

React如何将组件渲染到指定DOM节点详解

前言 众所周知React优点之一就是他的API特别简单.通过render 方法返回一个组件的基本结构,如同一个简单的函数,就可以得到一个可以复用的react组件.但是有时候还是会有些限制的,尤其是他的API中,不能控制组件所应该渲染到的DOM节点,这就让一些弹层组件很难控制.当父元素设置为overflow:hidden 的时候,问题就会出现了. 例如就像下面的这样: 我们实际期待的效果是这样的: 幸运的是,虽然不是很明显,但有一个相当优雅的方式来绕过这个问题.我们学到的第一个react函数是re

React如何利用相对于根目录进行引用组件详解

前言 本文主要给大家介绍了关于React利用相对于根目录进行引用组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 在对自己开发的组件中经常会做诸如以下的引用: import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs'; import { parseQuery, stringifyQuery } from '../../../utils/query'; import