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

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

react（三）：容器组件和傻瓜组件

猜你喜欢