React 中的 ref 回调是如何工作的？

Question

该ref属性使我们能够捕获不受控制的组件的值。

class MyComponent extends Component {
  render() {
     <input type="text" ref={el => this.setState({ myEl: el })}/>
  }
}

这是如何运作的？据推测，input实际上是一个 React 组件，它有一个属性（“prop”），每次调用ref时都会使用该字段的包装器组件调用回调？componentDidMount

Answer 1

来自反应文档：

添加 Ref 到 DOM 元素

React 支持一个可以附加到任何组件的特殊属性。该ref属性带有一个回调函数，该回调将在组件安装或卸载后立即执行。

[...]

React 将ref在组件挂载时使用 DOM 元素调用回调，并null在组件卸载时使用 DOM 元素调用回调。

因此，ref在组件安装到 DOM 后调用回调，并将底层 DOM 元素作为唯一参数。也在使用参数卸载后调用它null。