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

受控组件

表单元素的状态（值）由 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=xxxrender() {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 = xreturn <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按钮}
}

组件Demo 中打印的this.child1，this.child2，如下：