Edited at

メンテナブルなReactComponentの書き方

More than 1 year has passed since last update.


はじめに

Reactのコンポーネントの作り方、何パターンかありますが

中でもES6を使ったもので一番多く見かけるのが、下記のようなやつです。

https://reactjs.org/docs/components-and-props.html

// よくある基本型

class SampleComponent Extends React.Component {
render() {
// <Fragment>についてはこちら https://reactjs.org/docs/fragments.html
return (
<Fragment>
...contents...
</Fragment>
)
}

componentDidMount() {
// ...actions...
}

}

イケてる実装をしたいなら極力

SFC(StatelessFunctionalComponent)を使ってコンポーネントを作ると良いようです。

そのやり方がこれ。

const SampleComponent = () => {

return (
<Fragment>
...contents...
</Fragment>
)
}


SFCでの状態管理の方法

先述の方法だと状態管理をすることができず不便です。

そのため、SFCに状態管理の機能を持たせられるライブラリがたくさん登場しました。

メジャーなものはいくつかありますがここではrecomposeをサクッと紹介します。

// recompose - https://github.com/acdlite/recompose

const { Component } = React;
const { compose, setDisplayName, setPropTypes } = Recompose;
const { connect } = Redux();

// classを使わずにステート管理をしてます。
const enhance = compose(
setDisplayName('User'),
setPropTypes({
name: React.PropTypes.string.isRequired,
status: React.PropTypes.string
}),
connect()
);

const User = enhance(({ name, status, dispatch }) =>
<div className="User" onClick={() => dispatch({ type: "USER_SELECTED" })}>
{ name }: { status }
</div>
);