読者です 読者をやめる 読者になる 読者になる

Yamakichi’s blog

yamakichiの技術ブログ

ReactのVirtualDOM componentDidMount

JavaScript ES6 React.js

React.jsを使っていてVirtualDOMに対してライブラリを適用させたい場面がありました

VirtualDOMなのでライブラリを適用させるタイミングに肝心のDOMがまだレンダリングされていないという状況に遭遇。
Reactの動きは崩さず、VirtualDOM群がレンダリングを終えたタイミングで発火させたい。
ReactのcomponentDidMountと呼ばれる関数を使えば解決できました。

componentWillMount()

componentWillMount()とは、

ComponentがDOMツリーに追加された状態で呼ばれるのでDOMに関わる初期化処理を行いたい時に便利です。
componentWillMountと違いserver-side renderingの時には呼ばれません。
DOMを扱う処理のほか、AjaxリクエストやsetIntervalの登録などのserver-side rendering時には必要ない初期化処理についてはこの中でやることになります。

React.jsのComponent Lifecycle - Qiita

「ComponentがDOMツリーに追加された状態で呼ばれる」ものなので、ここに呼び出し後のDOMに対して当てたい処理を定義すればOK!

var Box = React.createClass({
  getInitialState() {
    return {
      windowWidth: window.innerWidth
    };
  },
  handleResize(e) {
    this.setState({windowWidth: window.innerWidth});
  },
  componentDidMount() {
    // 描画が成功して、DOMにアクセス可能になる
  },
  componentWillUnmount() {
    // 描画が行われる直前に呼ばれる
  },
  render() {
    return <div>Current window width: {this.state.windowWidth}</div>;
  }
});
React.render(<Box />, mountNode);


すごくわかりやすい例が載っているのがこちら。
qiita.com