React函数式组件值之useRef()和useImperativeHandle()
一、useRef
useRef共有两种用法,获取子组件的实例(只有类组件可用),在函数组件中的一个全局变量,不会因为重复 render 重复申明, 类似于类组件的 this.xxx。
1. useRef 在使用的时候,可以传入默认值来指定默认值,需要使用的时候,访问 ref.current 即可访问到组件实例:
// 使用 ref 子组件必须是类组件
class Children extends PureComponent {
render () {
const { count } = this.props
return (
<div>{ count }</div>
)
}
}
function App () {
const [ count, setCount ] = useState(0)
const childrenRef = useRef(null)
const onClick = useMemo(() => {
return () => {
console.log(childrenRef.current)
setCount((count) => count + 1)
}
}, [])
return (
<div>
点击次数: { count }
<Children ref={childrenRef} count={count}></Children>
<button onClick={onClick}>点我</button>
</div>
)
}
2. 有些情况下,我们需要保证函数组件每次 render 之后,某些变量不会被重复申明,比如说 Dom 节点,定时器的 id 等等,在类组件中,我们完全可以通过给类添加一个自定义属性来保留,比如说 this.xxx, 但是函数组件没有 this,自然无法通过这种方法使用,有的朋友说,我可以使用useState 来保留变量的值,但是 useState 会触发组件 render,在这里完全是不需要的,我们就需要使用 useRef 来实现了,具体看下面例子:
function App () {
const [ count, setCount ] = useState(0)
const timer = useRef(null)
let timer2
useEffect(() => {
let id = setInterval(() => {
setCount(count => count + 1)
}, 500)
timer.current = id
timer2 = id
return () => {
clearInterval(timer.current)
}
}, [])
const onClickRef = useCallback(() => {
clearInterval(timer.current)
}, [])
const onClick = useCallback(() => {
clearInterval(timer2)
}, [])
return (
<div>
点击次数: { count }
<button onClick={onClick}>普通</button>
<button onClick={onClickRef}>useRef</button>
</div>
)
}
二、useImperativeHandle
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值,说简单点就是,子组件可以选择性的暴露给副组件一些方法,这样可以隐藏一些私有方法和属性,官方建议,useImperativeHandle应当与 forwardRef 一起使用,具体如何使用看下面例子
function Child (props, ref) {
const child = useRef()
const introduce = useCallback (() => {
console.log('i can sing, jump, rap, play basketball')
}, [])
useImperativeHandle(ref, () => ({introduce}));
return (
<div ref={child}> { props.count }</div>
)
}
const ChildChild = forwardRef(Child)
function App () {
const [ count, setCount ] = useState(0)
const childRef = useRef(null)
const onClick = useCallback (() => {
setCount(count => count + 1)
childRef.current.introduce()
}, [])
return (
<div>
点击次数: { count }
<ChildChild ref={childRef} count={count}></ChildChild>
<button onClick={onClick}>点我</button>
</div>
)
}
React函数式组件值之useRef()和useImperativeHandle()的更多相关文章
- 如何对 React 函数式组件进行优化
文章首发个人博客 前言 目的 本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用.另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks ...
- React 函数式组件的 Ref 和子组件访问(useImperativeHandle)
引入:如何调用函数式组件内部的方法 对于 React 中需要强制修改子组件的情况,React 提供了 Refs 这种解决办法,使得我们可以操作底层 DOM 元素或者自定的 class 组件实例.除此之 ...
- React函数式组件使用Ref
目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...
- React函数式组件和类组件[Dan]
一篇对Dan的 How Are Function Components Different from Classes? 一文的个人阅读总结,内容来自于此.强烈推荐阅读 Dan Abramov.的博客. ...
- React函数式组件的性能优化
优化思路 主要优化的方向有2个: 减少重新 render 的次数.因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 ...
- 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后
目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...
- react 中的无状态函数式组件
无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- React 学习(一) ---- React Element /组件/JSX
学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
随机推荐
- 如何解决github下载很慢的问题?(已经解决)
目的是为了解决GitHub致命的下载速度慢的问题 方法 通过码云来导入github,通过码云下载 1.在github上面找到自己想要的项目 这一步略过 2.复制github项目上面的网页链接 3.打开 ...
- Google Cloud Spanner 究竟是什么?
谷歌于2017年推出的Google Cloud Spanner,原是谷歌内部使用的一个数据服务,后来又成为了谷歌云平台上搭建的数据库服务. Google Cloud Spanner 是一种数据库,它结 ...
- List_集合_介绍&常用方法-ArrayList集合
List_集合_介绍&常用方法 我们掌握了Collection接口的使用后,再来看看Collection接口中的子类,他们都具备那些特性呢?接下来,我们一起学习Collection中的常用几个 ...
- centos7系统的安装部署过程
一.进入系统引导界面进行配置 引导项说明: 安装centos7系统(*) 测试光盘镜像并安装系统 排错模式(修复系统 重置系统密码) 补充:centos7系统网卡名称 默认系统的网卡名称 eth0 e ...
- C#零基础小白快速入门
前言 本文写给想学C#的朋友,目的是以尽快的速度入门 C#好学吗? 对于这个问题,我以前的回答是:好学!但仔细想想,不是这么回事,对于新手来说,C#没有那么好学. 反而学Java还要容易一些,学Jav ...
- android开发技巧杂谈
android开发技巧一 android的一些常用包是发布在国外的,所以一些包,我们下载不下来,我们可以使用阿里云的镜像地址(maven { url 'https://maven.aliyun.com ...
- Solon2 开发之容器,八、动态代理的本质
在 Java 里动态代理,主要分:接口动态代理 和 类动态代理.因为它的代理类都是动态创建的,所以名字里会带上"动态". 官网的有些地方叫"代理",也有些地方叫 ...
- HTML5 + canvas 汽车赛道,飙车游戏(附源码)
好玩的游戏千千万 有趣的万里挑一 最近逛 gitHub 时 发现的一个好玩的赛车游戏 ,试玩之后感觉还是挺不错的 在这分享给那些喜欢玩赛车的车友们 效果图如下 源码分析 TweenMax.min.js ...
- 学习Java Day7
今天学习了if语句和C/C++基本无差异,也再次练了一下Java的输入
- javaEE(常用API集合<Collection和Map>)
javaEE 常用API Object类 public String toString() //打印地址 :类的全类名@内存地址 存在的意义:为了被子类去重写,以便于返回对象的内容信息,而不是地址信息 ...