容器组件和傻瓜组件

定义

• 容器组件：负责和Redux Store打交道的组件，处于外层
  做涉及状态转换的事情
• 傻瓜组件：专心负责渲染界面的组件，处于内层
  是纯函数，根据props产生结果

代码

更改Counter.js

• 区分傻瓜组件和容器组件

  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>
      );
    }
  }
  
  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;
  

• 将傻瓜组件的类组件更改为函数组件

  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>
    );
  }
  

• 结构props

  // 进一步改进
  function Counter({caption, onIncrement, onDecrement, value}) {
    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>
    );
  }
  

同理更改Summary.js

import React, { Component, PropTypes } from 'react';

import store from '../Store.js';

class Summary extends Component {
  render() {
    return (
      <div>Total Count: {this.props.sum}</div>
    );
  }
}

Summary.propTypes = {
  sum: PropTypes.number.isRequired
};


class SummaryContainer extends Component {
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);

    this.state = this.getOwnState();
  }

  onChange() {
    this.setState(this.getOwnState());
  }

  getOwnState() {
    const state = store.getState();
    let sum = 0;
    for (const key in state) {
      if (state.hasOwnProperty(key)) {
        sum += state[key];
      }
    }

    return { sum: sum };
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.sum !== this.state.sum;
  }

  componentDidMount() {
    store.subscribe(this.onChange);
  }

  componentWillUnmount() {
    store.unsubscribe(this.onChange);
  }

  render() {
    return (
      <Summary sum={this.state.sum}></Summary>
    );
  }
}

export default SummaryContainer;