组件声明

全面使用 ES6 class 声明，可不严格遵守该属性声明次序，但如有 propTypes 则必须写在顶部， lifecycle events 必须写到一起。

  • class
    • propTypes
    • defaultPropTypes
    • constructor
      • event handlers (如不使用类属性语法可在此声明)
    • lifecycle events
    • event handlers
    • getters
    • render
  1. class Person extends React.Component {
  2.   static propTypes = {
  3.     firstName: PropTypes.string.isRequired,
  4.     lastName: PropTypes.string.isRequired
  5.   }
  6.   constructor (props) {
  7.     super(props)
  9.     this.state = { smiling: false }
  11.     /* 若不能使用 babel-plugin-transform-class-properties
  12.     this.handleClick = () => {
  13.       this.setState({smiling: !this.state.smiling})
  14.     }
  15.     */
  16.   }
  18.   componentWillMount () {}
  20.   componentDidMount () {}
  22.   // ...
  24.   handleClick = () => {
  25.     this.setState({smiling: !this.state.smiling})
  26.   }
  28.   get fullName () {
  29.     return this.props.firstName + this.props.lastName
  30.   }
  32.   render () {
  33.     return (
  34.       <div onClick={this.handleClick}>
  35.         {this.fullName} {this.state.smiling ? 'is smiling.' : ''}
  36.       </div>
  37.     )
  38.   }
  39. }