作为响应式开发框架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. VUE项目的目录关系

    1.页面中只有一个index.html. 2.一个js文件.在路由中. 3.主要的app.vue. 4.最后就是可以放多个vue文件的~~(一个页面对应一个vue文件,一个vue组件对应一个js中的i ...

  2. 微信小程序：将中文语音直接转化成英文语音

    作者:瘟小驹    文章来源<微信小程序个人开发全过程> 准备工作: 准备工具:Eclipse.FileZilla.微信开发者工具.一个配置好SSL证书(https)的有域名的服务器 所需 ...

  3. 调用脚本的方式自动的创建或者是更新oracle数据库自带的Seq序列号的值

    执行脚本: CREATE OR REPLACE PACKAGE PKG_QUERY IS -- Author : ADMINISTRATOR -- Created : 2016/12/8 星期四 10 ...

  4. sublime的Vue语法高亮插件安装

    1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...

  5. selenium+python-unittest多线程执行用例

    前言 假设执行一条脚本(.py)用例一分钟,那么100个脚本需要100分钟,当你的用例达到一千条时需要1000分钟,也就是16个多小时...那么如何并行运行多个.py的脚本,节省时间呢?这就用到多线程 ...

  6. Spring Boot重定向的使用方法

    @RequestMapping(value = "/redirect", method = RequestMethod.GET) public void redirecttest( ...

  7. Matlab将多项式的系数设为0

    符号运算时有些多项式的系数值接近于0,像这样 fun = 3.5753839759325595498222646101085e-49*x + 1.836709923159824231201150839 ...

  8. php接入支付宝的流程(转载)

    php接入支付宝的流程写在这里供像我一样的小白参考. 1.首先要有一个创建一个应用(选好自己想要的功能,关于支付的功能,貌似都需要签约) 2.下载SDK&Dome(网址https://doc. ...

  9. 反素数ant HYSBZ - 1053（数学+dfs）

    对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4.如果某个正整数x满足:g(x)>g(i) 0<i<x ,则称x为反质数.例如,整数1,2,4,6等都是反质 ...

  10. 关于linux上部署定时python脚本

    遇到的坑: Python脚本中的文件操作,最好都用绝对路径, 文件头上写 #!/usr/local/bin/python3.6 ----------------------------------- ...