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;
相关推荐
菌菇汤8 分钟前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶16 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~26 分钟前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_4116719835 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客2 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim2 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室4 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子5 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存