组件DidMount()

此方法在您的组件呈现后调用一次。所以你的代码看起来像这样。

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, or 的一个缺点componentDidMount是它们实际上是在绘制 dom 元素之前执行的，但在它们从 React 传递到浏览器的 DOM 之后执行。

例如，如果您需要将 node.scrollHeight 设置为渲染的 node.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 [...]

根据我的经验window.requestAnimationFrame，这不足以确保 DOM 已从componentDidMount. 我运行的代码在componentDidMount调用后立即访问 DOM ，单独使用window.requestAnimationFrame会导致元素出现在 DOM 中；但是，由于尚未发生回流，因此尚未反映对元素尺寸的更新。

唯一真正可靠的方法是将我的方法包装在 asetTimeout和 a 中，window.requestAnimationFrame以确保在注册下一帧的渲染之前清除 React 的当前调用堆栈。

function onNextFrame(callback) {
    setTimeout(function () {
        requestAnimationFrame(callback)
    })
}

如果我不得不推测为什么会发生这种情况/这是必要的，我可以看到 React 批处理 DOM 更新，并且直到当前堆栈完成后才实际将更改应用于 DOM。

最终，如果您在 React 回调之后触发的代码中使用 DOM 测量，您可能希望使用此方法。

只是用新的 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.
         ...
     }, [])
}

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

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

这是一个很好的替代方案window.requestAnimationFrame，它没有一些用户在这里提到的问题（需要将它与它结合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>
        );
    }
}