React.jsを書くときに捗るTips


React.jsを書いていく中でよく使うノウハウやTipsの紹介です。

🐮 初期値をAjaxで取得するならComponentDidMountでセット

Componentの初期値をAjaxで取得するならComponentDidMountで取得するのが良さそうです。

class CommentBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    this.loadCommentsFromServer();
  }

  loadCommentsFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({
          data: data
        })
      }.bind(this)
    });
  }

  render() {
    return (
      
"commentBox"
>
        
Comments</h1>

        >
      </div>
    );
  }
};

🐡 編集途中のブラウザリロード前に警告を出す

class OriginalComponent extends React.Component {
  constructor(props) {
    super(props);
    this.onUnload = this.onUnload.bind(this);
  }

  componentDidMount() {
    window.addEventListener('beforeunload', this.onUnload);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.onUnload);
  }

  onUnload(event) {
    console.log('hoge');
    event.returnValue = 'hoge';
  }

  render() {
    return <div>Some contentdiv>;
  }
}

export default OriginalComponent

🐝 React bindの記述

ES6でReact.Componentを使う場合のbindの記述パターン。

class Sample extends React.Component {
  constructor() {
    super();
    _.forEach([
        '_method1',
        '_method2'
    ], (method) => {
        this[method] = this[method].bind(this);
    });
  }
}

eventと引数を受け渡したいパターンの場合は次のように記述します。

class Sample extends Component {
  // ...
  handleClick(event, message) {
    // do something
  }
  return (
    
 handleClick(event, "hoge")}>click</div>

  )
}

🚕 setStateでArrayをセットする

componentDidUpdateを動作させるためには、setStateでは必ず別のオブジェクトをセットする必要があります。Arrayオブジェクトのstateを更新する場合は次のように記述します。

this.setState({ ids: this.state.ids.concat([newId]) })

🤔 Render関連

HTMLを直接renderする

Reactのrenderメソッドの中でHTMLの文字列を直接描画する場合は次のように記述します。

createMarkup() {
  return {__html: 'First · Second'};
}

render() {
    return <div dangerouslySetInnerHTML={createMarkup()} />;
}

form/selectタグについて

FormのSelectタグについて選択済みにする場合はvalue属性に値をセットします。

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'coconut' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('あなたのすきな「におい」は、' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      
this
.handleSubmit}>
        
          好きな「におい」を選択してください:
          .state.value} onChange={this.handleChange}>
            >グレープフルーツ</option>
            
            >ココナッツ</option>
            
          </select>
        label>
        "submit" value="Submit" />
      </form>
    );
  }
}

renderメソッド内のコメント

JSX内のrenderメソッドでのコメントは次のように書きます。

{/* A JSX comment */}

ReactDOM.findDOMNode

ReactDOMはコンポーネントのDOM要素を操作するためのしくみです。ReactDOM.findDOMNodeを使うことで対象のDOMの情報を取得できます。

const name = ReactDOM.findDOMNode(this.refs.name).value.trim();

ReactDOM.render

ReactDOM.renderを使うことでHTMLの決められた箇所にDOMツリーを出力できます。

import React from 'react';
import { render } from 'react-dom';

render(
    
Hello world!div>
,
    document.getElementById('app')
);

🍮 Component関連

stateを持たないコンポーネント

stateを持たないコンポーネントはJavaScriptのアロー関数を利用して記述できます。

const HelloWorld = ({name}) => (
    
Hello, {name}!h1>

)

HelloWorld.propTypes = {
  "hoge": React.PropTypes.obj,
};

PureComponentについて

React.jsにv15.3から導入されたPureComponentの紹介です。PureComponentはshouldComponentでのupdateを現在のpropsと新しいpropsを比較して判定します。

通常のReact.Componentに比べて、shallowな比較で変化がないと判定されたComponentはUpdateされにくくなり、パフォーマンス改善に寄与します。

import { React, PureComponent } from 'react';

class Sample extends PureComponent {
  render 
PureComponent Sample</div>;

}

🎳 参考リンク

🖥 VULTRおすすめ

「VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります！

📚 おすすめの書籍