React.js,`DOMContentLoaded`是否与`componentDidMount`相等？

Question

人们总是说,你可以得到dom在componentDidMount.

是指componentDidMount和DOMContentLoaded是同步的,或意思时componentDidMount,将dom随时准备？

Answer 1

该DOMContentLoaded事件仅适用于加载整个HTML页面的时间.因此,此事件仅在整个网页的生命周期内被触发一次且仅一次.componentDidMount另一方面,在呈现React组件时调用.因此,完全可以componentDidMount被多次调用,尽管对于相同组件的类的完全不同的实例.

是的,在componentDidMount调用事件时,浏览器的DOM始终处于"就绪状态" .

Answer 2

在此componentDidMount之前DOMContentLoaded就已经准备好了反应并且DOM已准备就绪.

在这个演示中查看控制台日志:http://codepen.io/PiotrBerebecki/pen/EgdkXB

它记录以下内容:

componentDidMount: React rendered!
DOMContentLoaded before class: React rendered!
DOMContentLoaded after class: React rendered!
DOMContentLoaded in constructor: React rendered!
DOMContentLoaded in render: React rendered!
DOMContentLoaded in componentDidMount: React rendered!
DOMContentLoaded after ReactDOM.render: React rendered!

完整代码:

document.addEventListener('DOMContentLoaded', function(event) {
  console.log('DOMContentLoaded before class:', document.getElementById('app').textContent);
});


class App extends React.Component {
  constructor() {
    super();
    document.addEventListener('DOMContentLoaded', function(event) {
      console.log('DOMContentLoaded in constructor:', document.getElementById('app').textContent);
    });
  }

  componentDidMount() {
    document.addEventListener('DOMContentLoaded', function(event) {
      console.log('DOMContentLoaded in componentDidMount:', document.getElementById('app').textContent);
    });
    console.log('componentDidMount:', document.getElementById('app').textContent);
  }

  render() {
    document.addEventListener('DOMContentLoaded', function(event) {
      console.log('DOMContentLoaded in render:', document.getElementById('app').textContent);
    });
    return (
      <div>
        React rendered!
      </div>
    );
  }
}


document.addEventListener('DOMContentLoaded', function(event) {
  console.log('DOMContentLoaded after class:', document.getElementById('app').textContent);
});


ReactDOM.render(
  <App />,
  document.getElementById('app')
);


document.addEventListener('DOMContentLoaded', function(event) {
  console.log('DOMContentLoaded after ReactDOM.render:', document.getElementById('app').textContent);
});