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参数来获得

 

心得: 在实际中并没有这样实际运用过,但是这种实现体现了计算机编程中的大智慧,其中使用组件考虑是否严谨,文件架构上是否合理,是在敲击键盘前首先要考虑的问题。

posted @ 2018-06-02 18:00  Rachid  阅读(2864)  评论(0编辑  收藏  举报