react学习（11）setState

知识点

1：修改state的值，需要借助于React.Component这个类的原型对象上的一个方法setState,如果直接修改值，值变了，但是页面没有生效。（有点类似vue2中，比如修改一个数组的值，值变了页面也是不生效,页面也是不生效）

<script type="text/babel">
        class Weather extends React.Component {
            constructor(props){
                //构造器的函数中this为组件实例
                super(props);
                this.state ={isHot:true};
                //如果change要写成普通函数，那么就需要改变this的指向才能获取到state
                this.change = this.change.bind(this);
            }
            render(){
                const {isHot} = this.state;
                console.log(this);
                return <h1 onClick={this.change}>今天天气很{isHot?'炎热':'凉爽'}</h1>
            }
            change(){
                //直接修改页面不生效
                //this.state.isHot = !this.state.isHot
                this.setState({isHot:!this.state.isHot});
            }
        };
        ReactDOM.render(<Weather/>,document.getElementById('test'));
    </script>

2：分析一下，Weather类函数各调用次数，首先constructor调用一次，构造器函数，是在组件实例创建的时候调用，页面上只有一个<Weather/>组件实例，所以constructor调用了一次。render调用了几次？render调用了1+n次，首先是第一次创建组件实例的时候，然后n代表我每次click改变状态都需要重新返回新的虚拟dom的次数。change就是点几次，调用几次。
3：关于setState传入一个对象去修改state状态上的某一个值，是合并，不是覆盖，否则state上存的其他值不就没有了嘛。