美文网首页
react源码3 - ref

react源码3 - ref

作者: 邵志远 | 来源:发表于2020-05-29 22:37 被阅读0次

ref可以获取dom节点或者react元素的实例,一般有三种使用方法

1. string ref

image.png

使用方法就是在react元素上使用一个ref属性,然后传入一个字符串,最后react在完成这个节点的渲染之后,就会在this.ref这个对象上增加一个这个字符串的key,这个key对应的value就是这个react元素的实例。如果是一个function component则会报错。如果要对function component使用ref,就必须把function component用forwardRef给包起来


image.png

2. function

image.png

3. createRef

image.png
createRef会创建一个对象,这个对象默认值是{current: null},把这个this.objRef放到ref属性里后,这个节点对应的实例就会挂载到这个对象的current上。

相关文章

  • react源码3 - ref

    ref可以获取dom节点或者react元素的实例,一般有三种使用方法 1. string ref 使用方法就是在r...

  • react-ref

    ref:react对真实dom的引用 ref在reactElement上 ref在react组件上

  • React中ref的使用

    React中Ref是什么? ref是React提供的用来操纵React组件实例或者DOM元素的接口。 ref的作用...

  • Object.seal方法理解

    在阅读react源码时注意到react在创建ref时使用了Object.seal来保证RefObject的一致性,...

  • react 之 ref

    React的ref有3种用法: 字符串(已废弃) 回调函数 React.createRef() (React16....

  • 如何使用React Refs

    如何在React中利用ref以及ref转发,回调ref和HOC React Ref是有用的功能,可作为从父组件中引...

  • 【vue3源码】九、ref源码解析

    【vue3源码】九、ref源码解析 参考代码版本:vue 3.2.37 官方文档:https://vuejs.or...

  • react源码解析3.react源码架构

    react源码解析3.react源码架构 视频课程(高效学习):进入课程[https://xiaochen1024...

  • react源码解析3.react源码架构

    react源码解析3.react源码架构 视频课程(高效学习):进入课程[https://xiaochen1024...

  • react源码解析3.react源码架构

    react源码解析3.react源码架构 视频讲解(高效学习):进入学习[https://xiaochen1024...

网友评论

      本文标题:react源码3 - ref

      本文链接:https://www.haomeiwen.com/subject/wvhqzhtx.html