react学习（10）组件实例三大核心：state

知识点

1：定义组件的两种方式：函数式和类式。函数式适用于简单组件的定义，类式适用于复杂组件的定义。而简单与复杂的鉴定标准就是是否有state。

    <script type="text/babel">
        class Weather extends React.Component {
            constructor(props){
                super(props);
                this.state ={isHot:true};
            }
            render(){
                const {isHot} = this.state;
                console.log(this);
                return <h1 onClick={this.change}>今天天气很{isHot?'炎热':'凉爽'}</h1>
            }
            change=()=>{
                console.log(this);
            }
        };
        ReactDOM.render(<Weather/>,document.getElementById('test'));
    </script>

2：render中的this指向的是组件实例，因为是组件实例调用的，但是change中的this,如果写成普通函数，那么则指向的就是undefined,因为类里面函数默认开始严格模式，即使没有开启，指向的也是window,而且组件实例，所以可以把change写成箭头函数的形式。
3：关于事件绑定，react中采用小驼峰格式。原生的三种方式

<button onclick="demo()"></button>
btn.addEventlistener('click',function(){})
btn.onclick=function(){}

4：一个重要问题

class Weather extends React.Component {
            constructor(props){
                //构造器的函数中this为组件实例
                super(props);
                this.state ={isHot:true};
                //this.change = this.change.bind(this);
            }
            render(){
                const {isHot} = this.state;
                console.log(this);
                return <h1 onClick={this.change}>今天天气很{isHot?'炎热':'凉爽'}</h1>
            }
            change(){
                //console.log(this);
            }
        };

在类上直接定义一个方法，那个该方法在类的原型对象上

屏幕截图 2022-08-11 143135.png

当我们在构造器函数中写上

this.change = this.change.bind(this);

这个时候相当于在组件实例身上创建了一个change函数。bind的作用就是返回一个函数，并改变this的指向。而我们代码里面onClick调用的则是组件实例的change。

屏幕截图 2022-08-11 143420.png

注意：我们使用箭头函数，创建的change在组件实例身上，并不在组件类的原型对象上，类身上除了写函数之外，是可以写赋值语句的，比如a=1,那么其实是定义在实例对象的身上，箭头函数实际和赋值一样