我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔在学习别人代码的时候,看到了一个比较奇怪的ref的写法,和主流教程里面给出了一个不同的答案。实验了一下,貌似也是可以使用的。所以在这里和大家做一个分享。

苏南大叔:react教程,一个自定义的ref获取dom对象的写法 - react-ref-diy
react教程,一个自定义的ref获取dom对象的写法(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述一个另类的ref的写法。测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@16.14.2

前文回顾

在前面的文章里面,苏南大叔写过一篇在react里面使用ref的文章,分别是:

本文中,实践了一个新的写法。范例代码如下:

<div ref={node => (this.nodeRefFake = node)}></div>

核心代码是:

ref={node => (this.nodeRefFake = node)}

这里创建的变量this.nodeRefFake就相当于传统的ref.current。目前来看,使用起来是一样的。

类式组件

测试代码如下:

import React, { Component, createRef } from 'react'

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = { "iam": "苏南大叔" };
    this.nodeRefReal = createRef(null);
  }
  test() {
    console.log("读取上次", this.nodeRefFake.test);
    console.log("读取上次", this.nodeRefReal.current.test);
    let tmp = Date.now().toString().slice(-6);
    this.nodeRefFake.test = "可以保存数据?" + tmp;
    this.nodeRefReal.current.test = "可以保存数据!" + tmp;
    this.forceUpdate();
  }
  render() {
    return (
      <div>
        <div ref={node => (this.nodeRefFake = node)} >
          {this.state.iam}
        </div>
        <div ref={this.nodeRefReal} >
          {this.state.iam}
        </div>
        <button onClick={this.test.bind(this)}>设置一个值检测是否可以保存</button>
      </div>
    )
  }
  componentDidUpdate(prevProps, prevState, snapShot) {
    console.log(this.nodeRefFake);
    console.log("本轮结果", this.nodeRefFake.test);
    console.log(this.nodeRefReal.current);
    console.log("本轮结果", this.nodeRefReal.current.test);
  }
}

苏南大叔:react教程,一个自定义的ref获取dom对象的写法 - react代码
react教程,一个自定义的ref获取dom对象的写法(图5-2)

苏南大叔:react教程,一个自定义的ref获取dom对象的写法 - 运行结果
react教程,一个自定义的ref获取dom对象的写法(图5-3)

函数式组件

测试代码:

import { useRef, useEffect, useState } from "react";
function Child() {
  const nodeRefReal = useRef(null);
  const [iam, setIam] = useState("苏南大叔");
  let nodeRefFake = null;
  const test = () => {
    console.log("读取上次", nodeRefFake.test);
    console.log("读取上次", nodeRefReal.current.test);
    let tmp = Date.now().toString().slice(-6);
    nodeRefFake.test = "可以保存数据?" + tmp;
    nodeRefReal.current.test = "可以保存数据!" + tmp;
    console.log("本轮结果", nodeRefFake.test, nodeRefFake);
    console.log("本轮结果", nodeRefReal.current.test, nodeRefReal.current);
  }
  return (
    <div className="Child">
      <div ref={node => (nodeRefFake = node)} >{iam}</div>
      <div ref={nodeRefReal} >{iam}</div>
      <button onClick={test.bind(this)}>设置一个值检测是否可以保存</button>
    </div>
  );
}
export default Child;

结果看起来,也是和原来使用useRef()创建的ref.current一样的效果。

苏南大叔:react教程,一个自定义的ref获取dom对象的写法 - 自定义ref代码2
react教程,一个自定义的ref获取dom对象的写法(图5-4)

苏南大叔:react教程,一个自定义的ref获取dom对象的写法 - 测试结果2
react教程,一个自定义的ref获取dom对象的写法(图5-5)

结束语

就是为了写这个链接而准备的文字,react经验文章,链接如下:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react