React@16.x（11）ref

1，介绍

reference 引用。和 vue 中的 refs 类似，同样不属于子组件的 props。

场景：

• 需要直接操作 DOM 元素。比如让输入框聚焦。
• 需要使用子组件中的方法。

1.1，得到的结果

1. 作用于内置 HTML 元素，得到真实DOM对象。
2. 作用于类组件，得到类的实例对象。
3. 不能作用于函数组件。

举例：

import React, { Component } from "react";
import MyComp from "./components/MyComp";export default class App extends Component {handleClick = () => {this.refs.comp.method1();console.log(this.refs.h2.innerText);};render() {return (<><MyComp ref="comp"></MyComp><h2 ref="h2">h2元素</h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

MyComp 组件：

import React, { Component } from "react";export default class MyComp extends Component {method1 = () => {console.log("子组件的方法");};render() {return <div>子组件</div>;}
}

2，参数类型

在 render 执行时赋值，所以在 render 中获取为 undefined，在 componentDidMount 中可直接使用。

2.1，字符串（不再推荐）

上面已演示过，不再赘述。

2.2，对象

import React, { Component } from "react";
import MyComp from "./components/MyComp";export default class App extends Component {constructor(props) {super(props);this.comp = React.createRef();this.h2 = React.createRef();}handleClick = () => {this.comp.current.method1();console.log(this.h2.current.innerText);};render() {return (<><MyComp ref={this.comp}></MyComp><h2 ref={this.h2}>h2元素</h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

通过 React.createRef() 创建。该方法返回值就是一个对象，相当于：

constructor(props) {super(props);this.comp = {current: null,};this.h2 = {current: null,};
}

2.3，函数

import React, { Component } from "react";
import MyComp from "./components/MyComp";export default class App extends Component {getRefComp = (el) => {this.comp = el;};getRefH2 = (el) => {this.h2 = el;};handleClick = () => {this.comp.method1();console.log(this.h2.innerText);};render() {return (<><MyComp ref={this.getRefComp}></MyComp><h2 ref={this.getRefH2}>h2元素</h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

如果函数写在 render 中，那当 render 执行时，该函数会执行2次：

import React, { Component } from "react";export default class App extends Component {state = {show: true,};handleClick = () => {this.setState({show: !this.state.show // 想再次执行 render});};render() {return (<><h2ref={(el) => {console.log("el", el);this.h2= el;}}></h2><button onClick={this.handleClick}>获取 ref</button></>);}
}

执行结果：

函数调用时机

1，render 执行时会调用该函数。

以上面的例子来说，按照执行顺序打印 h2 时，
render 打印 undefined（该函数第一次还没执行），该函数打印 h2 元素，componentDidMount 打印 h2元素。

2，如果 ref 的值发生变动（旧函数被新函数替代），则分别调用旧新函数，时间点在 componentDidUpdate 之前。

• 旧函数调用时，传递 null；
• 新函数调用时，传递对象。

3，如果 ref 所在组件被卸载，也会调用函数，传递 null。

3，注意点

注意使用场景，能使用属性和状态控制，就不要用 ref。

---

以上。