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'))