作为响应式开发框架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自定义指令实现pc端加载更多

    转载来源:https://www.86886.wang/detail/5a6f19e644f9da55274c3bbd,谢谢作者分享! 原理 document.documentElement.scro ...

  2. sublime自动保存设置

    首选项——用户设置 (Preferences:Settings - User) 行末添加"save_on_focus_lost": true 注意用逗号分隔 保存即可 save_o ...

  3. 命令制作Mac系统U盘启动

    命令 sudo /Applications/Install\ macOS\ Mojave.app/Contents/Resources/createinstallmedia --volume /Vol ...

  4. eclipse格式化代码快捷键失效

    原因是与搜狗输入法的“简繁切换”快捷键冲突(取消搜狗输入法的简繁切换快捷键,即可解决)

  5. 源码安装zabbix遇到的报错集锦

    报错1:checking for mysql_config... configure: error: MySQL library not found 解决办法:查找mysql_config #find ...

  6. 如何破解Excel VBA密码

    首先,如果文件格式是(.xslm),需要先打开Excel文件,另存为2003版格式(.xls). 然后用普通的文本编辑器(我用的是NotePad++)打开这个文件,注意文件类型选“所有文件”. 然后在 ...

  7. Wine中中文显示为错误的解决方案

    First u must download wqy-microhei.ttc font online (https://github.com/anthonyfok/fonts-wqy-microhei ...

  8. tensorflow添加层-【老鱼学tensorflow】

    本节主要定义个添加层的函数,在深度学习中是通过创建多层神经网络来实现的,因此添加层的函数会被经常用到: import tensorflow as tf def add_layer(inputs, in ...

  9. UOJ#407. 【IOI2018】狼人 Kruskal,kruskal重构树,主席树

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ407.html 题解 套路啊. 先按照两个节点顺序各搞一个kruskal重构树,然后问题转化成两棵krus ...

  10. 002.RHCS-配置Ceph存储集群

    一 前期准备 [kiosk@foundation0 ~]$ ssh ceph@serverc #登录Ceph集群节点 [ceph@serverc ~]$ ceph health #确保集群状态正常 H ...