组件中的state和setState

1.state的基本使用

　　状态(state)即数据，是组件内部的私有数据，只能在组件内部使用

　　state的值是对象，表示一个组件中可以有多个数据

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  state的基本使用
*/

class App extends React.Component {
  /*constructor() {
    super()

    //初始化state
    this.state = {
      count: 0
    }
  } */
  
  // 简化语法初始化state
  state = {
    count: 0
  }

  render () {
    return (
      <div>
        <h1>计数器：</h1>
      </div>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

获取状态：this.state

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  state的基本使用
*/

class App extends React.Component {
  /*constructor() {
    super()

    //初始化state
    this.state = {
      count: 0
    }
  } */

  // 简化语法初始化state
  state = {
    count: 10
  }

  render () {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
      </div>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

2. setState()修改状态

　　状态是可变的

　　语法：this.setState({要修改的数据})

　　注意：不要直接修改state中的值，这是错误的！！！

　　　　// 正确

　　　　this.setState({

　　　　　　count: this.state.count + 1

　　　　})

　　　　// 错误

　　　　this.state.count += 1

　　setState()作用：1.修改state 2.更新UI

　　思想：数据驱动视图

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  state的基本使用
*/

class App extends React.Component {
  state = {
    count: 0,
    test: 'a'
  }

  render () {
    return (
      <div>
        <h1>计数器：{this.state.count}</h1>
        <button onClick={() => {
          this.setState({
            count: this.state.count + 1
          })
        }}>+1</button>
      </div>
    )
  }
}

//渲染组件
ReactDOM.render(<App />, document.getElementById('root'))