ストア データをコンポーネントの状態に置く方が理にかなっています。これは、 props が親コンポーネントによって変更される可能性があるためcomponentWillReceivePropsです。stateそのため、 wheneverを更新することは理にかなっています。
- ストアの変更イベントが発生し、
- 小道具が変更されるたびに（コンポーネント自体にのみ関連する派生データを状態に配置する）
以下は、還流ストアと props の変更をリッスンして更新するサンプル コンポーネントです。this.props関数で使用することはめったにrenderなく、代わりに、新しい小道具が入ってくるとそれらを修正します (コンポーネント自体でのみ使用される派生データを作成します)。
var SampleComponent = React.createClass({
mixins: [Reflux.ListenerMixin],
// reusable helper function to build state object
buildStateFromProps: function(props) {
return {
actualHeight: props.height + 20
}
},
// default props if no such was set by a parent component
getDefaultProps: function() {
return {
height: 100
};
},
// initial state with all value set to something default
// even using buildStateFromProps with default props
getInitialState: function() {
// this.props is built before this.state
var state = buildStateFromProps(this.props);
// append default data from store
state.text = '';
},
// happens when the parent component send different
// props data
componentWillReceiveProps: function(nextProps) {
// building derivative data from new props
// reusing buildStateFromProps
this.setState(buildStateFromProps(nextProps));
},
// setting up store to be used by the component
componentDidMount: function() {
// this.listenTo is a helper function ListenerMixin
this.listenTo(sampleStore, sampleUpdated);
},
// is called from the sampleStore update
sampleUpdated: function(sampleData) {
this.setState({
text: sampleData.text
});
},
render: function() {
return (
// ...
// using this.state.text from store updates and
// this.state.height from prop updates
);
}
});
props データを state に送信する理由は、render 関数が煩雑になるのを避けるためです。そうしないと、render 関数には、コンポーネントの「レンダリング」に実際には関係のない多くのコードが含まれます。さらに、この派生データがアプリケーションの他の部分で使用されている場合、コンポーネントから簡単に取り出してストアに入れることができます。
お役に立てれば。