【React】受控组件和非受控组件

news2025/2/7 22:29:36

受控组件

表单元素的状态（值）由 React 组件的 state 完全控制。组件的 state 保存了表单元素的值，并且每次用户输入时，React 通过事件处理程序来更新 state，从更改视图「推荐」。

非受控组件

基于ref获取DOM元素，我们操作DOM元素，来实现需求和效果「偶尔」。

基于ref获取DOM元素

1、在标签中使用

（1）ref="xxx"「 16.3 版本以后已经不推荐使用」
给需要的元素设置ref="xxx"，基于this.refs.xxx获取相应的DOM，但是在React.StrictMode模式下会报错

//使用
 <h2 ref="titleBox">...</h2>
 //获取
 this.refs.titleBox

（2）把ref设置成函数

x是形参：存储当前的DOM元素
获取DOM元素的x直接挂在实例的某个属性

//使用
ref={x=>this.xxx = x}
//获取
this.xxx

（3）基于React.createRef方法创建一个ref对象
React.createRef() 在类组件中创建对 DOM 元素或其他组件实例的引用，可以直接访问或操作 DOM 元素

this.xxx = React.createRef(); // ==> this.xxx = {current:null}

//使用
ref={ref对象(this.xxx)}
//获取
this.xxx.current

全部代码如下：

class Demo extends React.Component {
    box3 = React.createRef(); //this.box3=xxx

    render() {
        return <div>
            <h2 className="title" ref="titleBox">温馨提示</h2>
            <h2 className="title" ref={x => this.box2 = x}>友情提示</h2>
            <h2 className="title" ref={this.box3}>郑重提示</h2>
        </div>;
    }
    componentDidMount() {
        // 第一次渲染完毕「virtualDOM已经变为真实DOM」：此时我们可以获取需要操作的DOM元素
        console.log(this.refs);//{titleBox: h2.title}
        console.log(this.box2);//<h2 class="title">友情提示</h2>
        console.log(this.box3);//{current: h2.title}
    }
}

原理：
在render渲染的时候，会获取virtualDOM的ref属性

如果属性值是一个字符串，则会给this.refs增加这样的一个成员，成员值就是当前的DOM元素
如果属性值是一个函数，则会把函数执行，把当前DOM元素传递给这个函数「x->DOM元素」,而在函数执行的内部，一般都会把DOM元素直接挂在到实例的某个属性上
如果属性值是一个REF对象，则会把DOM元素赋值给对象的current属性

2、在组件中使用

给元素标签设置ref，目的：获取对应的DOM元素
给类组件设置ref，目的：获取当前调用组件创建的实例「后续可以根据实例获取子组件中的相关信息」
给函数组件设置ref，直接报错：Function components cannot be given refs. Attempts to access this ref will fail.
- 但是我们让其配合 React.forwardRef 实现ref的转发
- 目的：获取函数子组件内部的某个元素

React.forwardRef 用法：forwardRef 接受一个函数作为参数，这个函数有两个参数：props 和 ref。ref 会被传递给子组件的某个 DOM 元素（或者其他组件实例）。

class Child1 extends React.Component {
    state = {
        x: 100,
        y: 200
    };
    render() {
        return <div>
            子组件1
            <em ref={x => this.emBox = x}>100</em>
        </div>;
    }
}

const Child2 = React.forwardRef(function Child2(props, ref) {
    // console.log(ref); //我们调用Child2的时候，设置的ref属性值「函数」 
    //打印的结果为： x => this.child2 = x
    return <div>
        子组件2
        <button ref={ref}>按钮</button>
    </div>;
});

class Demo extends React.Component {
    render() {
        return <div>
            <Child1 ref={x => this.child1 = x} />
            <Child2 ref={x => this.child2 = x} />
        </div>;
    }
    componentDidMount() { 
        console.log(this.child1); //存储的是:子组件的实例对象
       console.log(this.child2); //存储的是:子组件内部的button按钮
    }
}