react(三):容器组件和傻瓜组件
让一个组件只专注于一件事,如果发现让一个组件做的事情太多,就可以把这个组件拆分成多个组件让每一个组件只专注于一件事
《深入浅出react和redux》 ---程墨
一个react组件最基本的基本上就是完成两大功能
1、读取store的状态,用于初始化组件的两大状态,监听store的状态变化
2、根据当前的props和state,渲染出用户的界面
先来看一个关于计数器的组件(具体调用的方法没有写)
const buttonStyle = {
margin: '10px'
};
class Counter extends Component {
constructor(props) {
super(props);
}
render() {
const value = this.state.value;
const {caption} = this.props;
return (
<div>
<button style={buttonStyle} onClick={this.***}>+</button>
<button style={buttonStyle} onClick={this.***}>-</button>
<span>{caption} count: {value}</span>
</div>
);
}
}
export default Counter;
我们把它拆成父子组件关系的两个组件,处于外层的叫做容器组件,负责和redux store打交道,处于内层的只负责渲染页面的组件叫做展示组件,也就是我们经常叫的傻瓜组件,这时候,傻瓜组件就不需要有状态了,实际上让傻瓜组件无状态也就是我们拆分的目的。
function Counter (props) {
render() {
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>
);
}
}
class CounterContainer extends Component {
constructor(props) {
super(props);
}
render() {
return <Counter caption={this.props.caption}
onIncrement={this.*****}
onDecrement={this.*****}
value={this.state.value} />
}
}
export default CounterContainer;
因为没有状态,所以不需要用对象来表示,甚至连类也不需要了,可以直接缩略为一个函数,同时。这里也不能使用this.props,而是通过函数的props参数来获得
心得: 在实际中并没有这样实际运用过,但是这种实现体现了计算机编程中的大智慧,其中使用组件考虑是否严谨,文件架构上是否合理,是在敲击键盘前首先要考虑的问题。