React-"Refs and the DOM"

原创 2016年11月29日 12:16:32

React-“Refs and the DOM”

学习是一件反反复复的事情,今天回顾react官方文档中Refs and the DOM,大致翻译一遍,将笔记摘录备忘。

React的典型数据流中,props是父组件和子组件交互的唯一方式。要修改子组件,你需要使用新的porps重新render它。然而有的时候我们又需要在典型数据流之外去修改一个子组件。被修改的子组件可能是一个React组件实例或者是一个DOM元素,不论哪种情况,React都为我们提供了一种解决方法。

The ref Callback Attribute

React中有一种特殊的属性(–ref),你可以将他运用到任何的组件中。ref属性接收一个回调函数,该函数会在组件mount或者unmount之后立即被调用。

当ref属性被用在一个HTML元素上时,该ref属性的回调函数会接收其下DOM元素作为该函数的参数。例如,下面的代码使用ref回调函数来存储一个DOM节点的引用:

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    //使用原生DOM API明确地使文字输入框获取焦点
    this.textInput.focus();
  }

  render() {
    //使用`ref`回掉函数将text input DOM元素的引用
    //存放在this.textInput中
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

React会在组件加载的时候将DOM元素作为参数来调用ref回调函数,在组件卸载的时候将null作为参数调用ref回调函数。

使用ref回调函数在类中设置属性是获取DOM元素的常见模式。如果你通常使用this.refs.myRefName来获取对元素引用,我们更推荐你使用上面的方法来代替。

当ref属性应用在自定义组件中时,ref回调函数接收已加载组件的实例作为它的参数。例如,如果我们希望将上面的CustomTextInput包装起来并模拟在它加载后立即被点击的效果:

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focus();
  }

  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

你不能在函数组件(functional components)中使用ref属性,因为它们没有实例。然而你可以在函数组件的render方法中使用ref属性:

function CustomTextInput(props) {
  //textInput需要在此声明
  //来确保ref回调函数可以引用它
  let textInput = null;

  function handleClick() {
    textInput.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );  
}

不要过度使用Refs

在你的应用中使用refs的最初考虑可能只是让它正常跑起来(“make things happen”)。如果是这种情况,花点时间批判性地思考一下在组件层次结构中哪里拥有state更加合适。通常,你会发现组件层次中的更高层是拥有该state的合适位置。文章Lifting State Up讲述了一个相关例子。

欢迎关注我的小站wyuhao.com

版权声明:本文为博主原创文章,未经博主允许不得转载。

react中操作dom的方法之---refs

自学react也那么久了,因为是自学嘛,当然很多坑,特别是react中如何操控DOM这一方面,就很头大,因为react生成的是虚拟的DOM,是无法直接操作的,在网上也查找了很多这方面的知识,但就是没能...
  • qq_26943485
  • qq_26943485
  • 2017年02月23日 17:29
  • 736

React学习之高级ReactDOM(二十四)

1.概述react-dom中的顶级APIrender() unmountComponentAtNode() findDOMNode() 浏览器支持情况 React支持所有流行的浏览器,包括IE9+...
  • qq_18661257
  • qq_18661257
  • 2017年03月24日 10:18
  • 676

十四、refs和DOM元素

十四、refs和DOM元素 在典型的React数据流中,props是父组件与其子组件交互的唯一方式。 要修改子组件,需要使用一个新的props进行重新渲染。 但是,在某些情况下,您需要在典...
  • u012615439
  • u012615439
  • 2017年06月30日 15:34
  • 92

React-为什么要使用虚拟DOM

什么是虚拟DOM(Virtual DOM)首先,解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应。虚拟DOM的工作原理是:数据 -> 全新的虚拟DOM -> ...
  • qiqingjin
  • qiqingjin
  • 2016年07月01日 20:42
  • 2196

gerrit refs相关的一些小研究

gerrit 作为 code review使用不算难,然鹅,总有一些内容知其然不知其所以然,这里稍作研究和记录。 1. refs/for 和 refs/heads git提交代码命令: $gi...
  • windfromthesouth
  • windfromthesouth
  • 2017年06月19日 15:16
  • 794

React组件refs详解

ref顾名思义我们知道,其实它就可以被看座是一个组件的参考,也可以说是一个标识。作为组件的属性,其属性值可以是一个字符串也可以是一个函数。 其实,ref的使用不是必须的。即使是在其适用的场景中也...
  • lu1024188315
  • lu1024188315
  • 2017年06月26日 11:06
  • 1612

轻松开启Windows 10的ReFS文件系统

大家在使用微软的操作系统时,都不免看到硬盘格式化为NTFS格式,那么这个格式能满足我们的需求吗?下一代的硬盘格式优势在哪儿?...
  • u014743697
  • u014743697
  • 2016年10月19日 10:26
  • 10614

微软Win10彻底封杀exFAT/FAT32磁盘,格式化只剩NTFS/REFS

恩威科技&天府云创7月6日消息:此前IT之家刚刚报道过Win10 OneDrive已经不允许FAT/FAT32磁盘文件进行同步备份等,但实际上微软在Win10创意者更新中已经彻底封杀了exFAT/...
  • English0523
  • English0523
  • 2017年07月06日 08:59
  • 1300

React中如何使用refs

ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示: [html] view ...
  • u010977147
  • u010977147
  • 2016年12月08日 15:30
  • 1842

Git远程分支和refs文件详解

最近同时同步博客到github和gitcafe上,遇到一些问题,我们分如下几个方面来分析一下: 推送远程分支到同一个服务器 推送远程分支到不同服务器 总结一下...
  • forever_wind
  • forever_wind
  • 2014年07月07日 13:03
  • 26492
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React-"Refs and the DOM"
举报原因:
原因补充:

(最多只允许输入30个字)