React组件三大核心属性：state

一、State概念

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。state值是对象，可以包含多个key-value组合。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面。
通过学习React,我们知道React组件有函数式组件与类式组件两种。类式组件就存在state属性。

二、修改State

需要注意的是state属性不能直接修改，只能通过setState方法修改。且setState是一种合并而不是替换，通过调用setState修改属性，同名属性将会被更新，不同名属性仍然保留。
以下给出一个点击文字修改isHot是炎热还是凉爽的小例子：

 <div class="" id="test">

    </div>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
        class Weather extends React.Component {
            state = { isHot: false }
            render() {
                return <h3 onClick={this.changeWeather}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h3>
            }
            changeWeather = () => {
                const isHot = this.state.isHot
                this.setState({isHot:!isHot})
            }
        }
        ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>

页面上可以看到：