简答：

React 保证在 refscomponentDidMount或componentDidUpdatehooks之前设置。但仅适用于实际渲染的儿童。

componentDidMount() {
  // can use any refs here
}

componentDidUpdate() {
  // can use any refs here
}

render() {
  // as long as those refs were rendered!
  return <div ref={/* ... */} />;
}

请注意，这并不意味着“React 总是在这些钩子运行之前设置所有引用”。
让我们看一些没有设置refs 的例子。

不会为未呈现的元素设置 Refs

React 只会为您实际从 render 返回的元素调用 ref 回调。

这意味着如果你的代码看起来像

render() {
  if (this.state.isLoading) {
    return <h1>Loading</h1>;
  }

  return <div ref={this._setRef} />;
}

并初步this.state.isLoading是true，你应该不希望this._setRef之前调用componentDidMount。

这应该是有道理的：如果你的第一个渲染返回了<h1>Loading</h1>，React 不可能知道在其他一些条件下它返回了其他需要附加 ref 的东西。还有什么可设置为裁判：对<div>，因为没有创建元素render()的方法表示它不应该被渲染。

所以在这个例子中，只会componentDidMount触发。但是，当this.state.loading更改为 时false，您将this._setRef首先看到attached，然后componentDidUpdate才会触发。

注意其他组件

请注意，如果您将带有 refs 的子组件传递给其他组件，则它们可能会阻止渲染（并导致问题）。

例如，这个：

<MyPanel>
  <div ref={this.setRef} />
</MyPanel>

如果MyPanel不包含props.children在其输出中，则不会工作：

function MyPanel(props) {
  // ignore props.children
  return <h1>Oops, no refs for you today!</h1>;
}

再说一次，这不是一个错误：React 不会将 ref 设置为因为 DOM 元素没有被创建。

如果将 Refs 传递给嵌套，则它们不会在生命周期之前设置 ReactDOM.render()

与上一节类似，如果您将带有 ref 的子组件传递给另一个组件，则该组件可能会阻止及时附加 ref。

例如，它可能不会从 返回子项render()，而是调用ReactDOM.render()生命周期钩子。您可以在此处找到一个示例。在那个例子中，我们渲染：

<MyModal>
  <div ref={this.setRef} />
</MyModal>

但在其生命周期方法中MyModal执行ReactDOM.render()调用： componentDidUpdate

componentDidUpdate() {
  ReactDOM.render(this.props.children, this.targetEl);
}

render() {
  return null;
}

从 React 16 开始，生命周期中的此类顶级渲染调用将被延迟，直到整个树的生命周期都运行完毕。这将解释为什么您没有及时看到附加的参考文献。

这个问题的解决方案是使用 门户而不是嵌套ReactDOM.render调用：

render() {
  return ReactDOM.createPortal(this.props.children, this.targetEl);
}

这样我们<div>的 ref 实际上包含在渲染输出中。

因此，如果您遇到此问题，您需要验证您的组件和 ref 之间没有任何可能会延迟渲染子项的内容。

不要setState用来存储 refs

确保您没有使用setState将 ref 存储在 ref 回调中，因为它是异步的，并且在“完成”之前，componentDidMount将首先执行。

仍然是一个问题？

如果以上提示都没有帮助，请在 React 中提交问题，我们将查看。

对问题的不同观察。

我意识到这个问题只发生在开发模式下。经过更多调查，我发现react-hot-loader在我的 Webpack 配置中禁用可以防止出现此问题。

我在用

• “react热加载器”：“3.1.3”
• "webpack": "4.10.2",

它是一个电子应用程序。

我的部分 Webpack 开发配置

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')

module.exports = merge(baseConfig, {

  entry: [
    // REMOVED THIS -> 'react-hot-loader/patch',
    `webpack-hot-middleware/client?path=http://localhost:${port}/__webpack_hmr`,
    '@babel/polyfill',
    './app/index'
  ],
  ...
})

当我看到在 render() 中使用内联函数可以工作，但使用绑定方法会崩溃时，我开始怀疑了。

在任何情况下都有效

class MyComponent {
  render () {
    return (
      <input ref={(el) => {this.inputField = el}}/>
    )
  }
}

react-hot-loader 崩溃（在 componentDidMount 中未定义引用）

class MyComponent {
  constructor (props) {
    super(props)
    this.inputRef = this.inputRef.bind(this)
  }

  inputRef (input) {
    this.inputField = input
  }

  render () {
    return (
      <input ref={this.inputRef}/>
    )
  }
}

老实说，热重载通常很难做到“正确”。随着开发工具的快速更新，每个项目都有不同的配置。也许我的特定配置可以修复。如果是这样，我会在这里告诉你。

当您尝试使用未安装组件的引用（例如在 setinterval 中使用引用）并且在组件卸载期间不清除设置间隔时，也会出现此问题。

componentDidMount(){
    interval_holder = setInterval(() => {
    this.myref = "something";//accessing ref of a component
    }, 2000);
  }

总是清除间隔，例如，

componentWillUnmount(){
    clearInterval(interval_holder)
}