React中的state&props

React.js 的 state 就是用来存储这种可变化的状态的。

1.setState 接受对象参数

• setState 方法，它接受一个对象或者函数作为参数。
• setState 方法由父类 Component 所提供。当我们调用这个函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上。
  
handleClickOnLikeButton () {
this.setState({
isLiked: !this.state.isLiked
})
}

• 当你调用 setState 的时候，React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。
  
handleClickOnLikeButton () {
console.log(this.state.isLiked) //false
this.setState({
isLiked: !this.state.isLiked
})
console.log(this.state.isLiked) //false
}

• 你会发现两次打印的都是 false，即使我们中间已经 setState 过一次了。这并不是什么 bug，只是 React.js 的 setState 把你的传进来的状态缓存起来，稍后才会帮你更新到 state 上，所以你获取到的还是原来的 isLiked。
• so，如果你想在 setState 之后使用新的 state 来做后续运算就做不到了。
  so，这里就自然地引出了 setState 的第二种使用方式，可以接受一个函数作为参数。

2.setState 接受函数参数

• 以下是对象作为参数

    handleClickOnLikeButton () {
      this.setState({ count: 0 }) // => this.state.count 还是 undefined
      this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN
      this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN
    }

  上面的代码的运行结果并不能达到我们的预期，我们希望 count 运行结果是 3 ，可是最后得到的是 NaN。但是这种后续操作依赖前一个 setState 的结果的情况并不罕见

• 以下是函数作为参数

   handleClickOnLikeButton () {
      this.setState((prevState) => {
        return { count: 0 }
      })
      this.setState((prevState) => {
        return { count: prevState.count + 1 } // 上一个 setState 的返回是 count 为 0，当前返回 1
      })
      this.setState((prevState) => {
        return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
      })
      // 最后的结果是 this.state.count 为 3
    }

  一个函数作为参数。React.js 会把上一个 setState 的结果传入这个函数，你就可以使用该结果进行运算、操作，然后返回一个对象作为更新 state 的对象：
  这样就可以达到上述的利用上一次 setState 结果进行运算的效果

3. props

怎么把 props 传进去呢？就像你在用普通的 HTML 标签的属性一样，可以把参数放在表示组件的标签上，组件内部就可以通过 this.props 来访问到这些配置参数了

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

比如这里的 likedText 与 unlikedText ，是写在 LikeButton这个组件的标签里的

你不能改变一个组件被渲染的时候传进来的 props
eg:

//  这是一个反例
 handleClickOnLikeButton () {
    this.props.likedText = '取消'
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

我们尝试在用户点击按钮的时候改变 this.props.likedText ，然后你会看到控制台报错啦

【总结】
* state 是让组件控制自己的状态，
* props 是让外部对组件自己进行配置。

附一个优秀的例子

import React, { Component} from 'react';
import ReactDOM from 'react-dom';

class LikeButton extends Component {
    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>
        )
    }
}


class Index extends Component {
    constructor () {
       super()
       this.state = {
          likedText: '已赞初始的lalaaaaaaaaaaaaaaaaaaaa',
          unlikedText: '赞初始的laaaaaaaaaaaaaaaaaaa'
        }
    }

    handleClickOnChange () {
        this.setState({
          likedText: '取消改变后wwwwwwwwwwww',
          unlikedText: '点赞改变后wwwwwwwwwwwwww'
        })
    }

    render () {
        return (
            <div>
                <LikeButton
                    likedText={this.state.likedText}
                    unlikedText={this.state.unlikedText} />
                <div>
                  <button onClick={this.handleClickOnChange.bind(this)}>
                    修改 wordings
                  </button>
                </div>
          </div>
        )
    }
}

ReactDOM.render(
    <div><Index /></div>,
    document.getElementById("app")
);  

可以看到，只点击第一个按钮的话，在初始的state里切换，点击后一个按钮后在改变后的state里切换