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の紹介です。PureComponentshouldComponentでの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のヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍