我建议你使用钩子。 它们可以从16.8.0版本开始使用。

你可以在react的官方文档中查看这个钩子的行为。

就像这样:

import React, { useEffect } from 'react'


const AppBase = ({ }) => {

    useEffect(() => {
        // set el height and width etc.
    }, [])

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

export default AppBase

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

使用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组件并在画布上绘制时，我遇到了奇怪的情况。我已经尝试了所有提到的方法，它们都不可靠地为我工作，与requestAnimationFrame内setTimeout我得到空画布在20%的时间，所以我做了以下工作:

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

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

实际上，有一个比使用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 > ） ｝

}

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