一、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()的更多相关文章

  1. 如何对 React 函数式组件进行优化

    文章首发个人博客 前言 目的 本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用.另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks ...

  2. React 函数式组件的 Ref 和子组件访问(useImperativeHandle)

    引入:如何调用函数式组件内部的方法 对于 React 中需要强制修改子组件的情况,React 提供了 Refs 这种解决办法,使得我们可以操作底层 DOM 元素或者自定的 class 组件实例.除此之 ...

  3. React函数式组件使用Ref

    目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...

  4. React函数式组件和类组件[Dan]

    一篇对Dan的 How Are Function Components Different from Classes? 一文的个人阅读总结,内容来自于此.强烈推荐阅读 Dan Abramov.的博客. ...

  5. React函数式组件的性能优化

    优化思路 主要优化的方向有2个: 减少重新 render 的次数.因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff),如果不 render,就不会 ...

  6. 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后

    目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...

  7. react 中的无状态函数式组件

    无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...

  8. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  9. React 学习(一) ---- React Element /组件/JSX

    学习React的时候,你可能听到最多的就是要先学习webpack, babel,要先学会配置然后才能学react 等等,一堆的配置就把我们吓着了,根本就没有心情就学习react了.其实在最开始学习re ...

  10. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

随机推荐

  1. 如何解决github下载很慢的问题?(已经解决)

    目的是为了解决GitHub致命的下载速度慢的问题 方法 通过码云来导入github,通过码云下载 1.在github上面找到自己想要的项目 这一步略过 2.复制github项目上面的网页链接 3.打开 ...

  2. Google Cloud Spanner 究竟是什么?

    谷歌于2017年推出的Google Cloud Spanner,原是谷歌内部使用的一个数据服务,后来又成为了谷歌云平台上搭建的数据库服务. Google Cloud Spanner 是一种数据库,它结 ...

  3. List_集合_介绍&常用方法-ArrayList集合

    List_集合_介绍&常用方法 我们掌握了Collection接口的使用后,再来看看Collection接口中的子类,他们都具备那些特性呢?接下来,我们一起学习Collection中的常用几个 ...

  4. centos7系统的安装部署过程

    一.进入系统引导界面进行配置 引导项说明: 安装centos7系统(*) 测试光盘镜像并安装系统 排错模式(修复系统 重置系统密码) 补充:centos7系统网卡名称 默认系统的网卡名称 eth0 e ...

  5. C#零基础小白快速入门

    前言 本文写给想学C#的朋友,目的是以尽快的速度入门 C#好学吗? 对于这个问题,我以前的回答是:好学!但仔细想想,不是这么回事,对于新手来说,C#没有那么好学. 反而学Java还要容易一些,学Jav ...

  6. android开发技巧杂谈

    android开发技巧一 android的一些常用包是发布在国外的,所以一些包,我们下载不下来,我们可以使用阿里云的镜像地址(maven { url 'https://maven.aliyun.com ...

  7. Solon2 开发之容器,八、动态代理的本质

    在 Java 里动态代理,主要分:接口动态代理 和 类动态代理.因为它的代理类都是动态创建的,所以名字里会带上"动态". 官网的有些地方叫"代理",也有些地方叫 ...

  8. HTML5 + canvas 汽车赛道,飙车游戏(附源码)

    好玩的游戏千千万 有趣的万里挑一 最近逛 gitHub 时 发现的一个好玩的赛车游戏 ,试玩之后感觉还是挺不错的 在这分享给那些喜欢玩赛车的车友们 效果图如下 源码分析 TweenMax.min.js ...

  9. 学习Java Day7

    今天学习了if语句和C/C++基本无差异,也再次练了一下Java的输入

  10. javaEE(常用API集合<Collection和Map>)

    javaEE 常用API Object类 public String toString() //打印地址 :类的全类名@内存地址 存在的意义:为了被子类去重写,以便于返回对象的内容信息,而不是地址信息 ...