react setState的使用

<div id="test"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

        <!-- 引入 babel, 用于将 jsx 转为 js -->
        <!-- Don't use this in production: -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

        <!-- 此处一定要写 babel -->
        <script type="text/babel">
            class Weather extends React.Component {

                constructor(props) {
                    super(props)
                    // 初始化状态
                    this.state = {isHot: false}
                    // 解决 changeWeather 中的 this 指向问题
                    this.changeWeather = this.changeWeather.bind(this)
                }

                render() {
                    // return <h2>今天天气{this.state.isHot ? '很热' : '很冷'}</h2>
                    // return <h2 onClick={demo()}>今天天气{this.state.isHot ? '很热' : '很冷'}</h2>
                    return <h2 onClick={this.changeWeather}>今天天气{this.state.isHot ? '很热' : '很冷'}</h2>
                }

                /*
                changeWeather 是作为 onClick 的回调，所以不是通过实例调用的，是直接调用
                */
                changeWeather() {
                    // 类中的方法默认开启了局部严格模式，所以 changeWeather 中的 this 为 undefined
                    const isHot = this.state.isHot
                    // 状态必须通过 setState 进行更新，且更新是一种合并，不是替换
                    this.setState({isHot: !isHot})

                }
            }

            ReactDOM.render(<Weather/>, document.getElementById('test'))

        </script>