组件的pros

前面文章提到一个React工程中包含很多Component，可以通过向组件中传递参数，及props，使得组件更灵活的被复用。
例如以下代码：

class LikeButton extends Component {
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    const likedText = this.props.likedText || '取消'
    const unlikedText = this.props.unlikedText || '点赞'
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked ? likedText : unlikedText} 
      </button>
    )
  }
}

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton likedText='已赞' unlikedText='赞' />
      </div>
    )
  }
}

在使用一个组件时，可以把参数放在标签的属性当中，所有的属性都会作为props对象的键值。可以把任意类型的数据作为参数，包括字符串、数字、对象、甚至是函数。例如，可以把一个对象传给组件LikeButton:

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton wordings={{likedText: '已赞', unlikedText: '赞'}} />
      </div>
    )
  }
}

JSX 的 {} 内可以嵌入任何表达式，{{}} 就是在 {} 内部用对象字面量返回一个对象而已，并不是什么新语法。
还可以往组件中传入函数作为参数：

class Index extends Component {
  render () {
    return (
      <div>
        <LikeButton
          wordings={{likedText: '已赞', unlikedText: '赞'}}
          onClick={() => console.log('Click on like button!')}/>
      </div>
    )
  }
}

通过this.props.onClick获取到这个传入的函数，修改LikeButton中的handleClickOnLikeButton方法：

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
    if (this.props.onClick) {
      this.props.onClick()
    }
  }

默认配置 defaultProps

---

React.js提供一种法师defaultProp，可以设置一个Component的默认配置：

class LikeButton extends Component {
  static defaultProps = {
    likedText: '取消',
    unlikedText: '点赞'
  }

  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    return (
      <button onClick={this.handleClickOnLikeButton.bind(this)}>
        {this.state.isLiked
          ? this.props.likedText
          : this.props.unlikedText} 
      </button>
    )
  }
}

props不可变

---

你不能在一个组件中修改props对应的属性值，它是readonly的，只能通过父级来修改传入的参数。

  handleClickOnLikeButton () {
    this.props.likedText = '取消'//不可以，这样会报错
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

总结

---

• 为了使得组件的可定制性更强，在使用组件的时候，可以在标签上加上属性来传入配置参数。
• 组件内部通过this.props获取传入的参数。
• 可以设置defaultProps来配置默认参数。
• props一旦传入变不可修改，可以通过父级组件主动重新渲染的方式来传入新的props，以达到更新效果。