react初学笔记（五）

目标 ：理解组件状态，掌握更改状态

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

class LikeButton extends Component {
  constructor () {
    super()
    this.state = {
        name:'Tomy',
        isLiked: false ,
        count :0
    }
  }

  handleClickOnLikeButton () {
    //   setState方法由父类Component提供，参数是一个对象或者函数
    // 这个函数用来修改组件状态state，并且重新调用render方法以渲染最新的内容到页面上
    // 注：修改state不能用this.state = xxx;

    /*
        注意：
        调用setState的时候，不会马上修改state，而是把这个对象缓存到一个更新队列里面，
        稍后从队列中把同一消息中的setState合并到state中，再触发组件更新，最终只渲染一次，所以没有多次渲染的性能问题
    */
    console.log(this.state.isLiked)   //false
    // 参数是对象：表示该组件的新状态，只需要传入需要更新的状态
    this.setState({
      isLiked: !this.state.isLiked
    })
    console.log(this.state.isLiked)    //false 值没变的原因是setState把传进来的状态缓存起来了
    // 参数是函数，react会把上一个setState的结果传入函数来运算操作，返回一个对象作为更新state的对象
    //ES5普通写法
    this.setState( function(preState){
        return {count:preState.count+1}
    })
    //ES6箭头函数
    this.setState((prevState) => {
        return { count: prevState.count + 2 } // 上一个 setState 的返回是 count 为 1，当前返回 3
    })
  }

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

class Index extends Component {
    render () {
      return (
        <div>
          <LikeButton />
        </div>
      )
    }
  }

  ReactDOM.render(
    <Index />,
    document.getElementById('root')