作为响应式开发框架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. 【原创】Linux基础之linux常用命令之文本替换

    linux常用命令之文本替换 1 vi vi test_file :%s/h/h1/g 注释:全文替换,将h替换为h1 :1,4s/h/h1/g 注释:将第1行到第4行的h替换为h1 :%s/\n/, ...

  2. Java的家庭记账本程序（K）

    日期:2019.3.10 博客期:043 星期日 呕吼~这里是编程菜鸟小Master,今天加油的把第二个模板套用了,更改了许多的设定,我想这一个程序的网页版也就到这里结束了,下面是一部分的展示图,想要 ...

  3. vs2010编译error_code

    C1083 : 现象: xxxxx.cpp clxx:fatal error C1083:无法打开源文件: “..\..\..\..\src\folder1\folder2\folder3\folde ...

  4. mysql拼接字符串

    CONCAT(str1,str2,...) 如:在每一列meeting_persons的现有内容之上,增加15112319字符串 UPDATE wos_hrs.meeting_logs SET mee ...

  5. 精通ArrayList,关于ArrayList你想知道的一切

    目录 精通ArrayList,关于ArrayList你想知道的一切 前言 ArrayList 内部结构,和常用方法实现 实例化方法 添加元素 add()方法 get()方法 移除元素 怎么扩容的 序列 ...

  6. James Munkres Topology: Theorem 19.6

    Theorem 19.6 Let \(f: A \rightarrow \prod_{\alpha \in J} X_{\alpha}\) be given by the equation \[ f( ...

  7. mysql查看每个数据库所占磁盘大小

    #查看每个数据库所占磁盘大小 SELECT TABLE_SCHEMA AS "库名", , ) AS "表所占空间(MB)", , ) AS "索引所 ...

  8. PostgreSQL自学笔记:1 初识 PostgreSQL

    博主教材:李小威.清华大学出版社.<PostgreSQL 9.6 从零开始学> 博主操作系统系统:Windows10 博主PostgreSQL版本:PostgreSQL 9.6 和 Pos ...

  9. 程序一 用记事本建立文件src.dat，其中存放若干字符。编写程序，从文件src.dat中读取数据，统计其中的大写字母、小写字母、数字、其它字符的个数，并将这些数据写入到文件test.dat中。

    用记事本建立文件src.dat,其中存放若干字符.编写程序,从文件src.dat中读取数据,统计其中的大写字母.小写字母.数字.其它字符的个数,并将这些数据写入到文件test.dat中. #inclu ...

  10. Physics Experiment 弹性碰撞 [POJ3684]

    题意 有一个竖直的管子内有n个小球,小球的半径为r,最下面的小球距离地面h高度,让小球每隔一秒自由下落一个,小球与地面,小球与小球之间可视为弹性碰撞,让求T时间后这些小球的分布 Input The f ...