实际上，有一个比使用request animationframe或timeout更简单、更清晰的版本。我很惊讶居然没人提起这件事: vanilla-js的onload处理程序。 如果可以，使用component did mount，如果不行，只需在jsx组件的onload处理程序上绑定一个函数。如果你想让函数运行每次渲染，也要在返回渲染函数的结果之前执行它。代码看起来是这样的:

runAfterRender = () => ｛ const myElem = document.getElementById("myElem") 如果(myElem) ｛ //做重要的事情 ｝ ｝ 呈现() ｛ this.runAfterRender () 回报( < div onLoad = {this.runAfterRender} > / /更多的东西 < / 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.
         ...
     }, [])
}

渲染之后，你可以像下面这样指定高度，并可以为相应的react组件指定高度。

render: function () {
    var style1 = {height: '100px'};
    var style2 = { height: '100px'};

   //window. height actually will get the height of the window.
   var hght = $(window).height();
   var style3 = {hght - (style1 + style2)} ;

    return (
      <div className="wrapper">
        <Sidebar />
        <div className="inner-wrapper">
          <ActionBar style={style1} title="Title Here" />
          <BalanceBar style={style2} balance={balance} />
          <div className="app-content" style={style3}>
            <List items={items} />
          </div>
        </div>
      </div>
    );`
  }

或者你可以使用sass指定每个react组件的高度。指定前2个react组件主div的固定宽度，然后第三个组件主div的高度为auto。因此，根据第三个div的内容，高度将被分配。

对我来说，componentDidUpdate单独或窗口。requestAnimationFrame本身并不能解决问题，但是下面的代码可以工作。

// Worked but not succinct
    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.state.refreshFlag) {  // in the setState for which you want to do post-rendering stuffs, set this refreshFlag to true at the same time, to enable this block of code.
            window.requestAnimationFrame(() => {
                this.setState({
                    refreshFlag: false   // Set the refreshFlag back to false so this only runs once.
                });
                something = this.scatterChart.current.canvas
                    .toDataURL("image/png");  // Do something that need to be done after rendering is finished. In my case I retrieved the canvas image.
            });
        }
    }

后来我测试requestAnimationFrame注释，它仍然完美地工作:

// The best solution I found
    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.state.refreshFlag) {  // in the setState for which you want to do post-rendering stuffs, set this refreshFlag to true at the same time, to enable this block of code.
            // window.requestAnimationFrame(() => {
                this.setState({
                    refreshFlag: false   // Set the refreshFlag back to false so this only runs once.
                });
                something = this.scatterChart.current.canvas
                    .toDataURL("image/png");  // Do something that need to be done after rendering is finished. In my case I retrieved the canvas image.
            // });
        }
    }

我不确定这是否只是一个巧合，额外的setState诱导时间延迟，以便在检索图像时，绘图已经完成(我将得到旧的画布图像，如果我删除setState)。

或者更可能的是，这是因为setState需要在所有内容呈现之后执行，所以它强制等待呈现完成。

我倾向于相信后者，因为根据我的经验，在我的代码中连续调用setState会导致每一个都在最后一个渲染完成后才被触发。

最后，我测试了以下代码。如果this.setState ({});不更新组件，但等到渲染完成，这将是最终的最佳解决方案，我认为。然而，它失败了。即使传递一个空的{}，setState()仍然更新组件。

// This one failed!
    componentDidUpdate(prevProps, prevState, snapshot) {
        // if (this.state.refreshFlag) {
            // window.requestAnimationFrame(() => {
                this.setState({});
                something = this.scatterChart.current.canvas
                    .toDataURL("image/png");
            // });
        // }
    }

用ES6类代替React.createClass进行了一点更新

import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    // this code might be called when there is no element avaliable in `document` yet (eg. initial render)
  }

  componentDidMount() {
    // this code will be always called when component is mounted in browser DOM ('after render')
  }

  render() {
    return (
      <div className="component">
        Some Content
      </div>
    );
  }
}

另外，检查React组件生命周期方法:组件生命周期

每个组件都有很多类似componentDidMount的方法。

componentWillUnmount() -组件即将从浏览器DOM中删除

实际上，有一个比使用request animationframe或timeout更简单、更清晰的版本。我很惊讶居然没人提起这件事: vanilla-js的onload处理程序。 如果可以，使用component did mount，如果不行，只需在jsx组件的onload处理程序上绑定一个函数。如果你想让函数运行每次渲染，也要在返回渲染函数的结果之前执行它。代码看起来是这样的:

runAfterRender = () => ｛ const myElem = document.getElementById("myElem") 如果(myElem) ｛ //做重要的事情 ｝ ｝ 呈现() ｛ this.runAfterRender () 回报( < div onLoad = {this.runAfterRender} > / /更多的东西 < / div > ） ｝

}