React: 傻瓜/展示性组件的简化（函数型组件及其传参）

本是古典何须时尚 2022-06-09 14:28 170阅读 0赞

## 案例代码 ##

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

## 参考文章 ##

**[容器组件与展示组件][Link 1]**

[Link 1]: https://github.com/BeijiYang/translation/blob/master/%E5%B1%95%E7%A4%BA%E7%BB%84%E4%BB%B6%E4%B8%8E%E5%AE%B9%E5%99%A8%E7%BB%84%E4%BB%B6.md