React躬行记（5）——React和DOM

　　React实现了一套与浏览器无关的DOM系统，包括元素渲染、节点查询、事件处理等机制。

一、ReactDOM

　　自React v0.14开始，官方将与DOM相关的操作从React中剥离，组成单独的react-dom库，从而让React能兼容更多的终端。在引入react-dom库后，就能调用一个全局对象：ReactDOM，虽然在之前的章节中已多次使用该对象，但是都没有给出过多的讲解，本节将对其做重点分析。

　　ReactDOM只包含了unmountComponentAtNode()、findDOMNode()、createPortal()和render()等为数不多的几个方法，其中在第2篇中介绍了render()的功能，又在第4篇中提到用unmountComponentAtNode()方法移除DOM中已挂载的组件。接下来会讲解剩余的两个方法。

1）findDOMNode()

　　当组件被渲染到页面真实的DOM中后，就能通过findDOMNode()方法得到生成的DOM元素，然后就能完成诸如读值、计算尺寸等操作。

　　注意，findDOMNode()只能获取已挂载的组件，并且不能用于函数组件。在组件的生命周期中，它只能存在于componentDidMount()和componentDidUpdate()两个回调函数中，在其它地方调用会抛出一个错误，具体如下所示。

class Btn extends React.Component {
  render() {
    ReactDOM.findDOMNode(this);        //抛出错误
    return <button>提交</button>;
  }
  componentDidMount() {
    ReactDOM.findDOMNode(this);        //<button>提交</button>
  }
}

　　在上面的示例中，this指向的是Btn组件实例，在将this传给findDOMNode()方法后，得到了一个<button>元素。有一点要注意，如果组件中的render()返回null或false，那么findDOMNode()只会返回null。

2）createPortal()

　　在React v16中，新增了Portal特性，能让组件渲染到父组件以外的DOM节点中。这个特性适用于需要跳出容器的场景，例如创建页面内定制的弹框。

　　在React中使用Portal特性，需要调用ReactDOM上的一个新方法：createPortal()。此方法能接收2个参数，第一个是可渲染的React子元素，例如字符串、React元素数组等；第二个是DOM元素，也就是要挂载的容器。关于这个方法的具体使用可参考下面的示例。

class Btn extends React.Component {
  render() {
    return ReactDOM.createPortal(this.props.children, document.body);
  }
}
ReactDOM.render(<Btn><p>按钮</p></Btn>, document.getElementById("container"));

　　在上面的render()方法中调用了ReactDOM.createPortal()，使得<p>元素最终挂载到了<body>元素中，而不是id属性为“container”的元素。

二、Refs

　　Refs是一种访问方式，通过它可读取render()方法内生成的组件实例和DOM元素，常用来处理元素的焦点、触发动画、集成第三方DOM库等。注意，在组件的生命周期中，要让Refs有效，得将其放在componentDidMount()和componentDidUpdate()两个回调函数中才行。虽然Refs能给某些场景带来便利，但是它破坏了React通过props传递数据的典型数据流，因此要尽量避免使用Refs。

　　如果要使用Refs的功能，那么就得设置React元素的ref属性，它的值可以是对象、回调函数和字符串，下面会分别讲解ref属性的这三类值。

1）对象

　　此处的对象是React.createRef()方法的返回值，包含一个current属性，而该属性指向的正是要读取的组件实例或DOM元素。下面的示例展示了ref属性和React.createRef()方法的配合过程。

class Btn extends React.Component {
  constructor(props) {
    super(props);
    this.myBtn = React.createRef();
  }
  render() {
    return <button ref={this.myBtn}>提交</button>;
  }
  componentDidMount() {
    let btn = this.myBtn.current;
    console.log(btn);         //<button>提交</button>
  }
}

　　首先在组件的构造函数中调用React.createRef()；再将返回值赋给this.myBtn，这样就能在组件内部的任意位置使用该对象了；然后让this.myBtn成为<button>元素的ref属性的值；最后在componentDidMount()中就能成功读取到current属性的值，从而完成了一次Refs式的访问。

2）回调函数

　　这个回调函数能接收一个参数（如下代码所示），当组件被挂载时，参数的值为组件实例或DOM元素；当组件被卸载时，参数的值为null。

class Btn extends React.Component {
  render() {
    return (
      <button ref={btn => { this.myBtn = btn }}>提交</button>
    );
  }
  componentDidMount() {
    let btn = this.myBtn;
    console.log(btn);           //<button>提交</button>
  }
}

　　与前一种使用方式最大的不同是解除了对React.createRef()方法的依赖，在回调函数中直接将其参数赋给this.myBtn，就能得到预期的结果，不用再调用一次current属性。

3）字符串

　　ref属性的值还可以是字符串，例如下面代码中的"myBtn"，通过this.refs.myBtn就能访问到想要的组件实例或DOM元素。

class Btn extends React.Component {
  render() {
    return <button ref="myBtn">提交</button>;
  }
  componentDidMount() {
    let btn = this.refs.myBtn;
    console.log(btn);           //<button>提交</button>
  }
}

　　不过，官方已经不推荐这种写法了，在未来的版本中有可能会被移除，因此建议改用回调函数的方式。

4）使用场景

　　ref属性不仅能像之前示例那样应用于DOM元素上，还能在类组件中使用ref属性，如下代码所示。

class Btn extends React.Component {
  render() {
    return <button>提交</button>;
  }
}
class Container extends React.Component {
  render() {
    return <Btn ref={btn => { this.myBtn = btn }}>提交</Btn>;
  }
  componentDidMount() {
    let btn = this.myBtn;
    console.log(btn);           //Btn组件的实例
  }
}

　　Container是Btn的父组件，在其render()方法中，通过回调函数将Btn组件的实例赋给了this.myBtn。

　　由于函数组件没有实例，因此不能对其添加ref属性。

5）子组件的DOM元素

　　在父组件中，如果要访问子组件的某个DOM元素，那么单靠ref属性是无法实现的，因为ref属性得到的只能是子组件的实例。不过，有一种间接的方式可以实现这个需求，那就是将ref属性和ReactDOM.findDOMNode()配合使用。下面套用上一节使用场景中的Btn和Container两个组件，代码只列出了修改部分，其余都已省略。

class Container extends React.Component {
  componentDidMount() {
    let btn = this.myBtn;
    let dom = ReactDOM.findDOMNode(btn);
    console.log(dom);         //<button>提交</button>
  }
}

　　在componentDidMount()方法中，调用了一次ReactDOM.findDOMNode()，从而得到了子组件所拥有的DOM元素。

三、Fragments

　　JSX结构有一个限制，那就是在最外层必须用一个元素包裹，即使这是一个冗余的元素，也得加上。例如为一个<ul>元素挂载一组元素集合，如下所示。

class Btns extends React.Component {
  render() {
    return (
      <div>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </div>
    );
  }
}

　　在页面上渲染出的DOM会像下面这样，其中<div>元素在此处是没有作用的。

<ul id="container">
  <div>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </div>
</ul>

　　为了避免这种无意义的输出，React引入了Fragments，其结构如下代码所示。只需将最外层的<div>元素的开始和结束标签分别改成<>和</>，就不用在DOM中增加额外的元素了。

class Btns extends React.Component {
  render() {
    return (
      <>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </>
    );
  }
}

1）React.Fragment

　　<>和</>最终会被编译成React.Fragment组件的开始和结束标签，也就是说，前者是后者的语法糖。下面的代码和上一个Fragments的示例是等价的。

class Btns extends React.Component {
  render() {
    return (
      <React.Fragment>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </React.Fragment>
    );
  }
}

　　如果要为Fragments添加Keys标识（即为其定义key属性），那么只能用React.Fragment组件包裹子元素。注意，key是React.Fragment组件目前唯一可用的属性。

原文地址：https://www.cnblogs.com/strick/p/10593862.html

时间： 2024-10-07 02:22:05

React躬行记（5）——React和DOM的相关文章

React躬行记（16）——React源码分析

React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版本很接近. 一.目录结构 React采用了由Lerna维护monorepo方式进行代码管理,即用一个仓库管理多个模块(module)或包(package).在React仓库的根目录中,包含三个目录: (1)fixtures,给源码贡献者准备的测试用例. (2)packages,React库提供的包的

React躬行记（7）——表单

表单元素是一类拥有内部状态的元素,这些状态由其自身维护,通过这类元素可让用户与Web应用进行交互.HTML中的表单元素(例如<input>.<select>和<radio>等)在React中都有相应的组件实现,不仅如此,React还将它们分成两种:受控组件和非受控组件. 一.受控组件 受控组件(Controlled Component)是指那些受React控制的表单元素,其状态(value.checked等属性)的变更由组件的state管理.对于不同的表单元素,其受控组

Vue躬行记（2）——指令

Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语句中的if类似,可根据表达式的计算结果,判断是否渲染分支中的元素和它所包含的子元素.在下面的示例中,当把数据对象的exist属性设为true时,<div>和<p>两个元素就会被添加到页面的DOM中. <div v-if="exist"> <p>

Vue躬行记（7）——渲染函数和JSX

除了可通过模板创建HTML之外,Vue还提供了渲染函数和JSX,前者的编码自由度很高,后者对于开发过React的人来说会很熟悉.注意,Vue的模板最终都会被编译成渲染函数. 一.渲染函数 虽然在大部分场景中,都会选择直观而清晰的模板,但遇到一些复杂的场景时,就不得不使用渲染函数render()了. 1)render() 假设有一个page组件,它会根据外部传入的type特性,有选择的渲染,其模板如下所示. <script type="text/x-template" id=&qu

Vue躬行记（3）——样式和表单

Vue对DOM元素的class和style两个特性做了专门的增强,即对CSS类和内联样式做了一层封装,通过v-bind指令来处理它们,而接收的表达式既可以是简单的字符串.对象或数组,也可以是复杂的计算属性.不仅如此,Vue还为表单设计了一些语法糖,让表单处理变得尤为简单. 一.CSS类 v-bind指令与class参数配合,就能处理CSS类,并且能接收多种类型的值. 1)对象 v-bind:class可以接收一个对象,对象的属性名就是CSS类名,只有当其值是真值时,才能添加到DOM元素上,否则会

CSS躬行记（2）——伪类和伪元素

一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素

ES6躬行记（7）——代码模块化

在ES6之前,由于ECMAScript不具备模块化管理的能力,因此往往需要借助第三方类库(例如遵守AMD规范的RequireJS或遵循CMD规范的SeaJS等)才能实现模块加载.而自从ES6引入了模块化标准后,就不需要再特地加载一次外部脚本了.模块化的语法不仅让JavaScript代码的组织变得更有条理,还包含封装.按需导出或导入等实用功能,可轻松应对日益复杂和庞大的前端工程.但有一点要注意,模块中的代码默认运行在严格模式中. 一.导出 一个模块就是一个独立的JavaScript文件,如果要读取

ES6躬行记（16）——Set

ES6引入了两种新的数据结构:Set和Map.Set是一组值的集合,其中值不能重复:Map(也叫字典)是一组键值对的集合,其中键不能重复.Set和Map都由哈希表(Hash Table)实现,并可按添加时候的顺序枚举. 一.Set Set类似于Array(数组),但需要通过SameValueZero算法保持值的唯一性.在前面的第11篇中,曾讲到Object.is()依据的比较算法是SameValue,SameValueZero算法与之类似,唯一的区别就是在该算法中,+0和-0是相等的. 1)创建

ES6躬行记（17）——Map

一.Map Map类似于Object(对象),可用来存储键值对,但需要通过SameValueZero算法保持键的唯一性.与Set一样,在使用之前也得要实例化,如下代码所示,构造函数Map()中的参数也是一个可选的可迭代对象,但此对象得是键值对的集合或两列的二维数组. new Map(); //Map(0) {} new Map([["name", "strick"], ["age", 28]]); //Map(2) {"name&quo