React学习（从零基础到精通）0110

组件实例三大属性 state，props，refs

state

    <script type="text/babel">
    //创建类式组件
    class Weather extends React.Component {
        //构造器调用几次？ --- 1次
        constructor(props) {
            console.log("constructor")
            super(props)
            this.state = {
                isHot:false,
                wind:"威风"
            }
            //解决changeWeather中this指向问题
            this.changeWeather = this.changeWeather.bind(this)
        }
        //render调用几次？ --- 1+n次，1是初始化的那次，n是状态更新的次数
        render(){
            console.log("render")
            const {isHot} = this.state;
            return <h1 id="title" onClick={this.changeWeather}>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
        }
        //changeWeather调用几次？ --- 点几次调用几次
        changeWeather(){
            console.log("changeWeather")
            //changeWeather放在哪里？ --- Weather的原型对象上，供实例使用
            //通过Weather实例调用changeWeather时，changeWeather中的this就是Weather实例

            //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用。
            //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
            console.log(this.state.isHot);
            
            //获取原来的isHot值
            const isHot = this.state.isHot;
            //严重注意：状态（state）不可直接更改，下面这行就是直接更改！！！
            //this.state.isHot = !isHot//这是错误的写法
            //严重注意：状态（state）必须通过setState进行修改
            this.setState({isHot:!isHot})

        }
    }
    ReactDOM.render(<Weather/>,document.getElementById("test"))
    const title = document.getElementById("title");
    </script>