案例代码
import React, { Component, PropTypes } from 'react';
import store from '../Store.js';
import * as Actions from '../Actions.js';
const buttonStyle = {
margin: '10px'
};
// 情况一: 有类
// class Counter extends Component {
// render() {
// const {caption, onIncrement, onDecrement, value} = this.props;
//
// return (
// <div>
// <button style={buttonStyle} onClick={onIncrement}>+</button>
// <button style={buttonStyle} onClick={onDecrement}>-</button>
// <span>{caption} count: {value}</span>
// </div>
// );
// }
// }
// 情况二: 函数式,无类;注①
// function Counter(props) {
// const {caption, onIncrement, onDecrement, value} = props;
// return (
// <div>
// <button style={buttonStyle} onClick={onIncrement}>+</button>
// <button style={buttonStyle} onClick={onDecrement}>-</button>
// <span>{caption} count: {value}</span>
// </div>
// );
//
// }
// 情况三: 直接将解构赋值放在参数部分,最简洁
function Counter({caption, onIncrement, onDecrement, value}) {
return (
<div>
<button style={buttonStyle} onClick={onIncrement}>+</button>
<button style={buttonStyle} onClick={onDecrement}>-</button>
<span>{caption} count: {value}</span>
</div>
);
}
Counter.propTypes = {
caption: PropTypes.string.isRequired,
onIncrement: PropTypes.func.isRequired,
onDecrement: PropTypes.func.isRequired,
value: PropTypes.number.isRequired
};
class CounterContainer extends Component {
constructor(props) {
super(props);
this.onIncrement = this.onIncrement.bind(this);
this.onDecrement = this.onDecrement.bind(this);
this.onChange = this.onChange.bind(this);
this.getOwnState = this.getOwnState.bind(this);
this.state = this.getOwnState();
}
getOwnState() {
return {
value: store.getState()[this.props.caption]
};
}
onIncrement() {
store.dispatch(Actions.increment(this.props.caption));
}
onDecrement() {
store.dispatch(Actions.decrement(this.props.caption));
}
onChange() {
this.setState(this.getOwnState());
}
shouldComponentUpdate(nextProps, nextState) {
return (nextProps.caption !== this.props.caption) ||
(nextState.value !== this.state.value);
}
componentDidMount() {
store.subscribe(this.onChange);
}
componentWillUnmount() {
store.unsubscribe(this.onChange);
}
render() {
return <Counter caption={this.props.caption}
onIncrement={this.onIncrement}
onDecrement={this.onDecrement}
value={this.state.value} />
}
}
CounterContainer.propTypes = {
caption: PropTypes.string.isRequired
};
export default CounterContainer;
很明显,情况三最简洁。
注
- 函数式组件,不能用this.props,需要通过参数获得
- 《深入浅出React & Redux》p66