react从零开始(三)

1、配置组件props
每个组件都有一个props参数,这个参数是一个对象,包含了所有对这个组件的配置,
在使用组件的时候可以把参数放在标签的属性中,所有的属性都会成为props对象的键值,
如下:

  class Index extends Component {
    render () {
      return (
        <div>
          <Header />
          <Main likedText="已赞" unLikedText="赞" /> //在这个赋予属性
          <Footer />
        </div>
      )
    }
  }
  
render() {
      console.log(this.props)// 在main组件内控制台输出
      return (
      <div>
          <h2>This is main content</h2>
          <button onClick={this.handleClickOnLikeButton.bind(this)}>
            {this.state.isLiked ? "取消": "点赞"}
          </button>
      </div>
      )
    }

另外就是jsx表达式插入可以在标签属性上使用,也就意味着我么可以把任何的数据类型当做参数传入进去,包括字符串、数组甚至函数等

传入函数为参数,如:

<Main likedText="已赞" unLikedText="赞" onClick={function () { console.log("点击了通过props传入的参数")}}/>

 handleClickOnLikeButton() 
  this.props.onClick(); //在这儿调用
  this.setState({
      isLiked: !this.state.isLiked
  })
}

在控制台会输出下面的内容

一个组件的行为显示形态都可以用props控制,就可以达到很好的可配置性

我们还可以配置组件的默认props

 static defaultProps = {
    likedText: "取消2",
    unLikedText: "点赞2"
  }

这样可以就不用判断参数是否传入,如果传入会自动按照传入的参数处理,如果没有传入就按照默认的参数处理

props的不可改变性
props一但传入就不能改变,
下面的这种改变方式会在控制台报错

this.props.likedText = '取消'

但是你可以通过父组件主动重新渲染的方式来传入新的 props，从而达到更新的效果。如下

class Index extends Component {
  constructor() {
    super()
    this.state = {
      likedText: "已赞",
      unLikedText: "赞"
    }
  }
  handleClickButton() {
    this.setState({
      likedText:"已赞2",
      unLikedText: "赞2"
    })
  }
  render () {
    return (
      <div>
        <Header />
        <button onClick={this.handleClickButton.bind(this)}></button>
        <Main likedText={this.state.likedText} unLikedText={this.state.unLikedText} onClick={function () { console.log("点击了通过props传入的参数")}}/>
        <Footer />
      </div>
    )
  }
}

2、state vs props

state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，可以被组件自身修改，而外部不能访问也不能修改。你可以认为 state 是一个局部的、只能被组件自身控制的数据源。state 中状态可以通过 this.setState 方法进行更新，setState 会导致组件的重新渲染。

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

state 和 props 有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。一个组件的 state 中的数据可以通过 props 传给子组件，一个组件可以使用外部传入的 props 来初始化自己的 state。但是它们的职责其实非常明晰分明：state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。

注: 主要跟随react小红书学习
附上小红书链接: http://huziketang.mangojuice.top/books/react/
若有更好学习建议,还请告知哈