react18中的受控与非受控组件及ref的使用

受控与非受控组件

  • 受控组件,基于修改 state 的值,修改组件内部的状态,来实现页面的更新,推荐使用

  • 非受控组件,基于 ref 获取 dom 的值,来实现页面的更新,不推荐使用,偶尔特殊的场景会使用

    • 给需要获取的元素设置 ref="xxx",后期基于 this.refs.xxx 去获取相应的 dom 元素(不推荐使用)
    html 复制代码
    <div>
      <h2 className="title" ref="box2">温馨提示</h2>
    </div>

    获取:this.refs.box2

    • 把 ref 设置为函数的方式,推荐使用
    html 复制代码
    <div>
          <h2 className="title" ref={(x) => (this.box2 = x)}>
            温馨提示
          </h2>
        </div>

    获取:this.box2.style.color = "green";

    • 基于 createRef 创建的 ref,推荐使用
js 复制代码
componentDidMount() {
    console.log("ClassComp componentDidMount");
    // const dom = document.querySelector(".title");
    // console.log("🚀 ~ ClassComp ~ componentDidMount ~ dom:", dom);
    // dom.style.color = "red";
    // const dom = this.refs.titleBox;
    console.log("🚀 ~ ClassComp ~ componentDidMount ~ dom:", this.box2);
    // dom.style.color = "green";
    this.box2.style.color = "green";
  }

原理:render 函数执行的时候,获取 vdom 的 ref 属性,然后根据 ref 的值去 dom 树中找对应的节点

  • 如果是字符串,则会给 this.refs 增加一个这样的成员,成员值就是当前的 dom 节点
  • 如果是函数,则直接调用这个函数,并将当前 dom 节点作为参数传递进去,我们一般都是直接把这个 dom 挂在到实例的某个属性上

组件和 dom 元素上的 ref

  • 组件上:ref={(x) => (this.box2 = x)} 获取的是组件实例
  • 元素上:ref="box2" 获取的是 dom 节点
js 复制代码
import { Component, createRef } from "react";

class Child1 extends Component {
  render() {
    return <h2 className="title">标题111</h2>;
  }
}
class Child2 extends Component {
  render() {
    return <h2 className="title">标题222</h2>;
  }
}

class ClassComp extends Component {
  box3 = createRef();
  render() {
    return (
      <div>
        <h2 className="title" ref={this.box3}>
          温馨提示
        </h2>
        <Child1 ref={(x) => (this.child1 = x)} />
        <Child2 ref={(x) => (this.child2 = x)} />
        <input type="text" ref={(x) => (this.input = x)} />
      </div>
    );
  }
  componentDidMount() {
    console.log(this.child1);
    console.log(this.child2);
    console.log(this.input);
  }
}
export default ClassComp;
  • 在函数组件上使用函数的方式获取 ref,会报错,正确的方式是使用 forwardRef 来实现 ref 的转发,获取函数子组件的 dom 节点
js 复制代码
import { Component, createRef, forwardRef } from "react";

class Child1 extends Component {
  render() {
    return <h2 className="title">标题111</h2>;
  }
}
const Child2 = forwardRef(function (props, ref) {
  return (
    <h2 className="title" ref={ref}>
      标题222
    </h2>
  );
});

class ClassComp extends Component {
  box3 = createRef();
  render() {
    return (
      <div>
        <h2 className="title" ref={this.box3}>
          温馨提示
        </h2>
        <Child1 ref={(x) => (this.child1 = x)} />
        <Child2 ref={(x) => (this.child2 = x)} />
        <input type="text" ref={(x) => (this.input = x)} />
      </div>
    );
  }
  componentDidMount() {
    console.log(this.child1);
    console.log(this.child2);
    console.log(this.input);
  }
}
export default ClassComp;
相关推荐
一枚前端小能手5 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码5 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA912 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登12 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多13 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus15 分钟前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom17 分钟前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia22 分钟前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_9284115624 分钟前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Pedantic26 分钟前
SwiftUI ShareLink – 显示分享表单的使用
前端