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 (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
</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 content</div>;
}
}
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 (
<div onClick={(event) => 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 &middot; 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 (
<form onSubmit={this.handleSubmit}>
<label>
好きな「におい」を選択してください:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">グレープフルーツ</option>
<option value="lime">ライム</option>
<option value="coconut">ココナッツ</option>
<option value="mango">マンゴー</option>
</select>
</label>
<input type="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(
<div>Hello world!</div>,
document.getElementById('app')
);

🏀 Component関連

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

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

const HelloWorld = ({name}) => (
<h1>Hello, {name}!</h1>
)
HelloWorld.propTypes = {
"hoge": React.PropTypes.obj,
};

PureComponentについて

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

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

import { React, PureComponent } from 'react';
class Sample extends PureComponent {
render <div>PureComponent Sample</div>;
}

🎂 参考リンク

🖥 VULTRおすすめ

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

📚 おすすめの書籍