当我需要打印接收大量数据的react组件并在画布上绘制时，我遇到了奇怪的情况。我已经尝试了所有提到的方法，它们都不可靠地为我工作，与requestAnimationFrame内setTimeout我得到空画布在20%的时间，所以我做了以下工作:

nRequest = n => range(0,n).reduce(
(acc,val) => () => requestAnimationFrame(acc), () => requestAnimationFrame(this.save)
);

基本上我做了一个requestAnimationFrame的链，不确定这是好主意还是不好，但这在100%的情况下为我到目前为止(我使用30作为n变量的值)。

您可以更改状态，然后在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>
        );
    }
}

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

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

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

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

在尝试了上面所有建议的解决方案后，没有运气，我发现我的一个元素在中间有CSS过渡，这就是为什么我不能得到正确的计算几何后道具改变。 所以我不得不使用onTransitionEnd监听器等待片刻，当尝试获得容器元素的DOM高度计算。 希望这能节省一些人的工作日，哈哈。

我觉得这个解决方案很脏，但我们开始吧:

componentDidMount() {
    this.componentDidUpdate()
}

componentDidUpdate() {
    // A whole lotta functions here, fired after every render.
}

现在我就坐在这里，等着大家投反对票。