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


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

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

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

class CommentBox extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
loadCommentsFromServer() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({
data: data
})
}.bind(this)
});
}
componentDidMount() {
this.loadCommentsFromServer();
}
render() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data}/>
</div>
);
}
};

Can I put ajax in React component constructor?

🍣 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属性に値をセットします。

<select value={optionsState}>
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cherry</option>
</select>

renderメソッド内のコメント

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

{/* A JSX comment */}

🏀 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>;
}

🗽 参考リンク

📚 おすすめの書籍