对我来说，没有组合窗。requestAnimationFrame或setTimeout产生一致的结果。有时它会起作用，但并不总是如此——或者有时为时已晚。

我通过循环window来修复它。根据需要多次请求animationframe。 (一般为0 ~ 2 ~ 3次)

关键是diff > 0:在这里我们可以准确地确保页面何时更新。

// Ensure new image was loaded before scrolling
if (oldH > 0 && images.length > prevState.images.length) {
    (function scroll() {
        const newH = ref.scrollHeight;
        const diff = newH - oldH;

        if (diff > 0) {
            const newPos = top + diff;
            window.scrollTo(0, newPos);
        } else {
            window.requestAnimationFrame(scroll);
        }
    }());
}

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>
    );
  }
});

我不会假装我知道为什么这个函数可以工作，但是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>);

使用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 [...]

React在这些情况下有一些生命周期方法，列表包括但不限于getInitialState, getDefaultProps, componentWillMount, componentDidMount等。

在你的情况和需要与DOM元素交互的情况下，你需要等待直到DOM准备好，所以使用componentDidMount如下:

/** @jsx React.DOM */
var List = require('../list');
var ActionBar = require('../action-bar');
var BalanceBar = require('../balance-bar');
var Sidebar = require('../sidebar');
var AppBase = React.createClass({
  componentDidMount: function() {
    ReactDOM.findDOMNode(this).height = /* whatever HEIGHT */;
  },
  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>
    );
  }
});

module.exports = AppBase;

此外，有关react生命周期的更多信息，您可以查看下面的链接: https://facebook.github.io/react/docs/state-and-lifecycle.html

ReactDOM.render()文档:

如果提供了可选的回调，它将在 组件被呈现或更新。