作为响应式开发框架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. 【原创】大叔问题定位分享（15）spark写parquet数据报错ParquetEncodingException: empty fields are illegal, the field should be ommited completely instead

    spark 2.1.1 spark里执行sql报错 insert overwrite table test_parquet_table select * from dummy 报错如下: org.ap ...

  2. Jedis

    需要把jedis依赖的jar包添加到工程中 连接单机版 // 第一步:创建一个Jedis对象.需要指定服务端的ip及端口. Jedis jedis = new Jedis("192.168. ...

  3. Elasticsearch为记录添加时间戳timestamp

    https://blog.csdn.net/peterwanghao/article/details/76577546

  4. process.argv

    返回进程启动时的命令行参数. 第一个元素是 process.execPath. 使用 process.argv0 可以获取 argv[0] 原始的值. 第二个元素是当前执行的 JavaScript 文 ...

  5. 继承了AppCompatActivity的全屏设置

    v7下全屏设置:getSupportActionBar().hide();getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN ...

  6. 我的 Putty 配色方案

    首先,右键单击 Putty 顶部边框,在弹出菜单中选择 Change settings,进入颜色设置 Category->Window->Colours 然后,按以下参数配置进行修改: D ...

  7. Django与ajax、分页器

    ajax简单数据响应 ajax请求,后台只需要返回信息,所以不会出现render.redirect 模板层: $('.btn').click(function() { $.ajax({ url: '/ ...

  8. Redis新接触

    一.redis简介 redis即Remote Dictionary Server,是一个key—value存储系统. 二.优点 1.redis支持的存储类型较多,如String.List.Hash.s ...

  9. [PKUSC2018]星际穿越(倍增)

    题意:n个点的图,点i和[l[i],i)的所有点连双向边.每次询问(l,r,x)表示x到[l,r]的所有点的最短路径长度和. 首先这题显然可以线段树优化建图,但是需要比较好的常数才能通过45分,还需要 ...

  10. BZOJ.3566.[SHOI2014]概率充电器(概率DP 树形DP)

    BZOJ 洛谷 这里写的不错,虽然基本还是自己看转移... 每个点的贡献都是\(1\),所以直接求每个点通电的概率\(F_i\),答案就是\(\sum F_i\). 把\(F_x\)分成:父节点通电给 ...