React学习——三大属性之一 state

目录

1.初识state

2.初始化state0

        2.1 设置state 

        2.2 使用state

3.state的事件绑定

      3.1 事件名称重写：

      3.2 回调函数的使用

4.事件绑定的this的指向问题以及解决方法

        4.1 函数写在哪？  

        4.2 调用方法

        4.3 this的指向问题

4.4 解决this指向

5.setState 方法 修改state的值

6.state 以及 自定义函数的简写

        6.1 state的简化

        6.2 自定义函数的简化

---

1.初识state

state 指状态，而状态即是驱动页面进行渲染是数据。

在类式组件内，输出实例对象的this。可以看到state默认值为null

2.初始化state0

        以天气是否炎热为例。我们理由 isHot 属性来判断，那么isHot就是状态之一。

        2.1 设置state 

        在类内，构造器方法内，首先设置props ，关于props后续再聊。只用知道props的接受要使用super

        然后设置state，使用this.state 来进行赋值，由于状态不止一种，所以赋值对象。在这里可以类比vue内的data

// 要传入状态，参数，可能会使用到props，而props 必须使用super来调用
        constructor(props){
            super(props)
            // state则不需要使用super来设置调用，未设置式 state为null，可以设置成对象，因为state内可能不止一个数据
            this.state = {isHot:false}
        }

        2.2 使用state

        state存放在实例对象上。渲染组件时，是调用的render()方法，所以在render内，this指代组件实例，所以this.state 可以获取到state的值。

        为了方便使用，选择解构赋值，将要使用的属性简化。

 		render(){
            // 要理解，这里的this，是指渲染时，调用了render()的组件实例
            console.log(this);
            const {isHot} = this.state  // 解构赋值 
            return <h1>今天天气很{isHot?'炎热':'凉爽'}</h1>
        }

在 标签内的使用，类似与vue的插值语法，只是这里只使用一个花括号。在花括号内进行使用即可。

<h1>今天天气很 {isHot?'炎热':'凉爽'} </h1>