recompose
ダウンロード
yarn add recompose
ステートレスなcomponentを作るために使われる
containerにstateやpropsの管理を預ける事で可読性が向上したり、propsの変更を管理する事で余計なレンダリングを減らすことができる
code: Component.js
import { compose, withStateHandlers, setDisplayName, lifecycle, pure, withHandlers } from 'recompose'
import { connect } from 'react-redux'
import Component from '../components/Component'
const display = "Component"
const component = Component
// propsの初期化 ここで管理する
const initialProps = {}
// propsの値を変更する
const handleChange = (ownProps) => {
return (name, value) => {
return {
}
}
}
// propsの変更を行うhandler
const stateHandler = {
// sample: (ownProps) => () => console.log('hello')
}
// propsの変更を行わないhandler
const handleProps = {
// sample: (ownProps) => () => console.log('hello')
}
const mapStateToProps = (state) => {
return {
...state
}
}
const mapDispatchToProps = (dispatch, ownProps) => ({})
// componentDidMountなどのライフサイクルを記述する
const lifeCycle = {
componentDidMount() {}
}
// recomposeの設定をcomponentに反映させる関数
const Enhance = compose(
// componentの名前を設定する
setDisplayName(display),
// propsとそのpropsに関する関数を設定する
withStateHandlers(
initialProps,
stateHandler
),
// containerで設定した関数をcompoentに渡す
withHandlers(handleProps),
connect(
mapStateToProps,
mapDispatchToProps
),
lifecycle(lifeCycle),
// propsが変更された時だけ再描画が走るようにする
pure,
)
export default Enhance(component)