函数组件又叫做无状态组件，类组件又叫做有状态组件。
状态又叫做数据
函数组件没有自己的状态，只负责静态页面的展示。
我们可以理解为纯ui展示。()
类组件有自己的状态，扶着更新UI,会让页面动起来.

state就是数据，是组件内部的私有数据。
只能够在组件内部使用。
state的值是一个对象，表示一个组件中可以有多个数据。

语法：this.setState({ count:新值 })
只会更改state中count的值。
并不会将state中其他值进行初始化。
千万不要直接更改state中的值。这是错误的。
必须通过 this.setState
this.state.count=10 直接更改错误的
那么state的两个作用：1修改state中的值. 2更新ui

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component { 
    // 简化语法初始化state(推荐)
    // state = {
    //     count:0
    // }
    // 另外一种
    constructor() { 
        super()
        this.state = {
            count:0
        }
    }
    // 点击事件
    render() { 
        return (
            <div>
                {/* 注意这里不要写成 {this.state} 否者会报错 */}
                <span>计数值 {this.state.count}</span>
                <button onClick={() => {
                    //如果这里的代码很多怎么抽离出来呢？？
                    this.setState({
                        count:this.state.count+1
                    })
                }}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component {
  state = {
    count:100
  }
  onIncrement() { 
    this.setState({
      count:this.state.count+10
    })
  }
    // 点击事件
    <!-- 第一种:箭头函数中的this,利用箭头函数中自身不绑定this的特点 -->
    render() { 
        return (
            <div>
                <span>计数值 {this.state.count}</span>
                {/* 箭头函数中的this指向外部环境，此处为render()里面的方法。
                而render中的方法就是组件中的实例 */}
                <button onClick={()=>this.onIncrement()}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component { 
    state = {
        count:100
    }
    <!-- 点击按钮的时候肯定是先执行的constructor -->
  constructor() { 
    super() 
    this.state = {
      count:0
    }
    this.onIncrement=this.onIncrement.bind(this)
  }
  // 事件处理程序
  onIncrement() { 
    this.setState({
      count:this.state.count+10
    })
  }
    // 点击事件
    render() { 
        return (
            <div>
                {/* 注意这里不要写成 {this.state} 否者会报错 */}
        <span>计数值 {this.state.count}</span>
                <button onClick={this.onIncrement}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
class ShowCont extends React.Component { 
  state = {
    count:0,
  }
  // 事件处理程序
  onIncrement=() =>{ 
    this.setState({
      count:this.state.count+10
    })
  }
    // 点击事件
    render() { 
        return (
            <div>
                {/* 注意这里不要写成 {this.state} 否者会报错 */}
        <span>计数值 {this.state.count}</span>
                <button onClick={this.onIncrement}>+</button>
            </div>
        )
    }
}
ReactDOM.render(<ShowCont/>, document.getElementById('root'))