初学react之state和setState

一、在react中，state是用于存储一些变量值的，它可以让我们的变量值变得更加好操作和管理。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

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

  render () {
    return (
      <button>
        {this.state.isLiked ? '提交' : '取消'} 
      </button>
    )
  }
}

上面例子中，state存储着一个对象，对象里有个属性isLiked,这个属性值可用于控制我们按钮的文案，那么当我们想要改变按钮文案时，只需要改变state中isLiked的值即可，这里就可以用到我们的setState了。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

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 ? '提交' : '取消'} 
      </button>
    )
  }
}

我们添加了一个点击事件，利用点击事件来触发state中属性值的更改。每当我们修改state的值时会重新调用render函数把我们更改的内容渲染到页面上，但是setState不会立即修改state而是把它存储在一个队列里，稍后才作更新。如果你想立即更新state的话，那么可以接受一个函数作为参数，这样子就可以达到目的了，同时多次使用SetState时候只会渲染一次，不必担心性能问题。