react中的DOM操作实现


Posted in Javascript onJune 30, 2021
目录
  • 前面的话
  • 使用场景
  • ref
    • 【HTML元素】
    • 【类组件】
    • 【函数式组件】
    • 【对父组件暴露DOM节点】
  • 非受控组件
    • 【默认值】
  • ReactDOM
    • 【render()】
    • 【unmountComponentAtNode()】
    • 【findDOMNode()】
  • 新ref

前面的话

某些情况下需要在典型数据流外强制修改子代。要修改的子代可以是 React 组件实例,也可以是 DOM 元素。这时就要用到refs来操作DOM

使用场景

下面是几个适合使用 refs 的情况

1、处理焦点、文本选择或媒体控制

2、触发强制动画

3、集成第三方 DOM 库

如果可以通过声明式实现,则尽量避免使用 refs

[注意]不要在 Dialog 组件上直接暴露 open() 和 close() 方法,最好传递 isOpen 属性

ref

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数,它在组件被加载或卸载时会立即执行

[注意]在组件mount之后再去获取ref。componentWillMount和第一次render时都获取不到,在componentDidMount才能获取到

【HTML元素】

当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数

React 组件在加载时将 DOM 元素传入 ref 的回调函数,在卸载时则会传入 null。ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }
  focus() {
    this.textInput.focus();
  }
  render() {
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

更简短的写法如下

ref={input => this.textInput = input}

【类组件】

当 ref 属性用于使用 class 声明的自定义组件时,ref 的回调接收的是已经加载的 React 实例

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

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

[注意]这种方法仅对 class 声明的 CustomTextInput 有效

【函数式组件】

不能在函数式组件上使用 ref 属性,因为它们没有实例

【对父组件暴露DOM节点】

在子节点上暴露一个特殊的属性。子节点将会获得一个函数属性,并将其作为 ref 属性附加到 DOM 节点。这允许父代通过中间件将 ref 回调给子代的 DOM 节点

该方法适用于类组件和函数式组件

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

在上面的例子中,Parent 将它的 ref 回调作为一个特殊的 inputRef 传递给 CustomTextInput,然后 CustomTextInput 通过 ref 属性将其传递给 <input>。最终,Parent 中的 this.inputElement 将被设置为与 CustomTextInput 中的 <input> 元素相对应的 DOM 节点

非受控组件

要编写一个非受控组件,而非为每个状态更新编写事件处理程序,可以使用 ref 从 DOM 获取表单值

[注意]可能通过e.target.value取得DOM值,而不用绑定react

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

由于非受控组件将真实数据保存在 DOM 中,因此在使用非受控组件时,更容易同时集成React和非React代码

【默认值】

在 React 的生命周期中,表单元素上的 value 属性将会覆盖 DOM 中的值。使用非受控组件时,通常希望 React 可以为其指定初始值,但不再控制后续更新。要解决这个问题,可以指定一个 defaultValue 属性而不是 value

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input
          defaultValue="Bob"
          type="text"
          ref={(input) => this.input = input} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

同样,<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked,<select> 和 <textarea> 支持 defaultValue

ReactDOM

react-dom这个软件包提供了针对DOM的方法,可以在应用的顶级域中调用,也可以在有需要的情况下用作跳出React模型的出口。但大部分组件都不应该需要使用这个包

render()
unmountComponentAtNode()
findDOMNode()

【render()】

ReactDOM.render(
  element,
  container,
  [callback]
)

渲染一个React元素,添加到位于提供的container里的DOM元素中,并返回这个组件的一个 引用 (或者对于无状态组件返回null)

如果这个React元素之前已经被渲染到container里去了,这段代码就会进行一次更新,并且只会改变那些反映元素最新状态所必须的DOM元素

【unmountComponentAtNode()】

ReactDOM.unmountComponentAtNode(container)
从DOM元素中移除已挂载的React组件,清除它的事件处理器和state。如果容器内没有挂载任何组件,这个函数什么都不会干。 有组件被卸载的时候返回true,没有组件可供卸载时返回 false

【findDOMNode()】

ReactDOM.findDOMNode(component)
如果这个组件已经被挂载到DOM中,函数会返回对应的浏览器中生成的DOM元素 。需要从DOM中读取值时,比如表单的值,或者计算DOM元素的尺寸,这个函数会非常有用。 大多数情况下,可以添加一个指向DOM节点的引用,从而完全避免使用findDOMNode 这个函数。当 render 返回 null 或者 false 时, findDOMNode 也返回 null

新ref

版本16.3 之前,React 有两种提供 ref 的方式:字符串和回调,因为字符串的方式有些问题,所以官方建议使用回调来使用 ref。而现在引入的 createRef API,据官方说是一种零缺点的使用 ref 的方式,回调方式也可以让让路了

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

然后使用current属性,即可获得当前元素

this.myRef.current

典型应用如下所示

constructor(props){
    super(props)
    this.Mask = React.createRef()
    this.MenuList = React.createRef()
  }
  handleClick = () => {
    ReactDOM.findDOMNode(this.MenuList.current).classList.toggle('transform-zero')
    ReactDOM.findDOMNode(this.Mask.current).classList.toggle('mask-show')
  }

 [注意]使用styledComponents样式化的元素暴露的接口是innerRef,而不是ref

<Wrap innerRef={this.itemRef}>

到此这篇关于react中的DOM操作实现的文章就介绍到这了,更多相关react DOM操作内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
elementui的el-popover修改样式不生效的解决
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
适合后台管理系统开发的12个前端框架(小结)
原生JavaScript实现简单五子棋游戏
Jun 28 #Javascript
javascript拖曳互换div的位置实现示例
You might like
PHP 高级课程笔记 面向对象
2009/06/21 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
python中的字典使用分享
2016/07/31 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
如何做好总经理助理
2013/11/12 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
公司总经理任命书
2014/06/05 职场文书
九寨沟导游词
2015/02/02 职场文书
李强为自己工作观后感
2015/06/11 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书