我实际上遇到了类似行为的麻烦，我在一个组件中渲染了一个视频元素，它的id属性，所以当RenderDOM.render()结束时，它加载了一个需要id来找到占位符的插件，但它找不到它。

componentDidMount()中的setTimeout与0ms修复了它:)

componentDidMount() {
    if (this.props.onDidMount instanceof Function) {
        setTimeout(() => {
            this.props.onDidMount();
        }, 0);
    }
}

我不会假装我知道为什么这个函数可以工作，但是window。当我需要在useEffect中使用Ref访问DOM元素时，getComputedStyle 100%的时间为我工作-我只能假设它将与componentDidMount一起工作。

我把它放在useEffect代码的顶部，它似乎迫使效果等待元素被绘制，然后再继续下一行代码，但没有任何明显的延迟，如使用setTimeout或异步睡眠函数。如果没有这个，当我试图访问Ref元素时，它将返回为未定义。

const ref = useRef(null);

useEffect(()=>{
    window.getComputedStyle(ref.current);
    // Next lines of code to get element and do something after getComputedStyle().
});

return(<div ref={ref}></div>);

componentDidMount ()

此方法在呈现组件后调用一次。你的代码应该是这样的。

var AppBase = React.createClass({
  componentDidMount: function() {
    var $this = $(ReactDOM.findDOMNode(this));
    // set el height and width etc.
  },

  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
          <div className="inner-wrapper">
            <ActionBar title="Title Here" />
            <BalanceBar balance={balance} />
            <div className="app-content">
              <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});

只是用新的Hook方法来更新一下这个问题，你可以简单地使用useEffect钩子:

import React, { useEffect } from 'react'

export default function App(props) {

     useEffect(() => {
         // your post layout code (or 'effect') here.
         ...
     },
     // array of variables that can trigger an update if they change. Pass an
     // an empty array if you just want to run it once after component mounted. 
     [])
}

另外，如果你想在布局绘制之前运行，使用useLayoutEffect钩子:

import React, { useLayoutEffect } from 'react'

export default function App(props) {

     useLayoutEffect(() => {
         // your pre layout code (or 'effect') here.
         ...
     }, [])
}

使用componentDidUpdate或componentDidMount的一个缺点是，它们实际上是在dom元素完成绘制之前执行的，而是在它们从React传递到浏览器的dom之后。

比如说，如果你需要set node。到呈现节点的scrollHeight。scrollTop，那么React的DOM元素可能不够。你需要等到元素被画完才能得到它们的高度。

解决方案:

使用requestAnimationFrame来确保你的代码在绘制新渲染的对象后运行

scrollElement: function() {
  // Store a 'this' ref, and
  var _this = this;
  // wait for a paint before running scrollHeight dependent code.
  window.requestAnimationFrame(function() {
    var node = _this.getDOMNode();
    if (node !== undefined) {
      node.scrollTop = node.scrollHeight;
    }
  });
},
componentDidMount: function() {
  this.scrollElement();
},
// and or
componentDidUpdate: function() {
  this.scrollElement();
},
// and or
render: function() {
  this.scrollElement()
  return [...]

您可以更改状态，然后在setState回调中进行计算。根据React文档，这是“保证在更新应用后触发”。

这应该在componentDidMount或代码中的其他地方完成(比如在调整大小事件处理程序上)，而不是在构造函数中完成。

这是窗户的好替代品。它没有一些用户在这里提到的问题(需要结合setTimeout或多次调用它)。例如:

class AppBase extends React.Component {
    state = {
        showInProcess: false,
        size: null
    };

    componentDidMount() {
        this.setState({ showInProcess: true }, () => {
            this.setState({
                showInProcess: false,
                size: this.calculateSize()
            });
        });
    }

    render() {
        const appStyle = this.state.showInProcess ? { visibility: 'hidden' } : null;

        return (
            <div className="wrapper">
                ...
                <div className="app-content" style={appStyle}>
                    <List items={items} />
                </div>
                ...
            </div>
        );
    }
}