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

案例代码

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

参考文章

容器组件与展示组件