react教程，一个自定义的ref获取dom对象的写法

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

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

大家好，这里是苏南大叔的平行空间笔记本博客，这里记录苏南大叔和计算机代码的故事。本文描述一个另类的ref的写法。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

前文回顾

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

• https://seosn.com/say/react-createref.html
• https://seosn.com/say/react-useref.html
• https://seosn.com/say/react-ref.html

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

<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);
  }
}

函数式组件

测试代码：

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经验文章，链接如下：

• https://seosn.com/tag/react/

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