作为响应式开发框架React，我们知道他是数据驱动的，但有时候避免不了还是得动用到DOM操作，这个时候我们就可以用到ref；用法如下：

然后这样做有个弊端，当一个 ul 下面的 li 是动态添加的时候，不能通过 this.ul.querySelectAll('li').length 实时捕获；原因剖析，因为 li 动态添加是通过 setState 操作进行的，而 setState 是异步的，所以不能实时获取也实属正常；

好在setState有个回调函数，用法如下：

另：如果同时触发了多次setState，React能把他们合并成一次setState,减少了比对的次数，从而提升性能；

React之ref的更多相关文章

  1. React中ref的使用方法

    React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...

  2. react 使用 ref 报错 ，[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs)

    react 项目中给指定元素加事件,使用到 react 的 ref 属性,Eslink 报错 [eslint] Using string literals in ref attributes is d ...

  3. （转）react 使用 ref 报错 ，[eslint] Using string literals in ref attributes is deprecated. (react/no-string-refs)

    原文地址:https://www.cnblogs.com/gangerdai/p/7396226.html react 项目中给指定元素加事件,使用到 react 的 ref 属性,Eslink 报错 ...

  4. React中Ref 的使用 React-踩坑记_05

    React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...

  5. React之ref详细用法

    在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像react官网所描述的一样,在reac ...

  6. React中ref的用法

    在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...

  7. react 之 ref

    react提供一个refs的安全口,做到‘接触’或调用 从render()返回的组件实例的方法.DOM节点. 用法:1. ref Callback属性 ref 属性可以是一个回调函数,此函数会在这个组 ...

  8. React Native ref高级用法&&setNativeProps使用

    ref属性不只是string ref属性不仅接受string类型的参数,而且它还接受一个function作为 callback.这一特性让开发者对ref的使用更加灵活. render() { retu ...

  9. React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式

    import React, { Component } from "react" export default class MyInput extends Component { ...

随机推荐

  1. 2019 Android 高级面试题总结 从java语言到AIDL使用与原理

    说下你所知道的设计模式与使用场景 a.建造者模式: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 使用场景比如最常见的AlertDialog,拿我们开发过程中举例,比如C ...

  2. 如何在python脚本下启动django程序

    直接上图

  3. Vue父子组件之间的相互通信

    组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...

  4. 饮冰三年-人工智能-Python-19 Python网络编程

    Socket:套接字.作用:我们只需要安照socket的规定去编程,就不需要深入理解tcp/udp协议也可以实现 1:TCP协议 1.1  客户端服务端循环收发消息 # 1:引入stock模块(导包) ...

  5. 《学习之道》第八章孤军奋战or组队合作

    孤军奋战与组队合作:别再苦思冥想,拖延行为需要差别对待 对拖延我得提一个小建议,你要暂时把自己与那些会干扰你的人和事隔离开.自己到一个房间里去,或者去图书馆,这样就没什么事能让你分心了. 如果一门课让 ...

  6. css固定div头部 滚动条滚动内容

    页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...

  7. IDEA上创建 Maven SpringBoot + zookeeper +dubbo 实例

    概述 首先声明,本文是学习总结类型的博客内容,如有雷同纯属学习.本位主要结合zookeeper和dubbo做个简单实例.目前来说,一般网站架构随着业务的发展,逻辑越来越复杂,数据量越来越大,交互越来越 ...

  8. CodeForces - 833B The Bakery

    题解: 线段树经典应用 首先暴力$f[i][j]$表示考虑前i位分成j段的最大值 转移$f[k][j-1]+cost(k+1,i)$枚举k转移 不同数的经典套路就是从它到它前驱这一段 于是维护每个数前 ...

  9. H5唤醒app，不完全兼容

    ---ps---最近新发现一个开源的H5唤醒app的库:建议使用第三方开源库https://github.com/suanmei/callapp-lib实现:或者极光魔链(后期可能会收费)https: ...

  10. event.target 和 event.currentTarget 的区别

    event.target This property of event objects is the object the event was dispatched on. It is differe ...