day04--react中state的简化

一、简化state

回顾我们之前的写法：

state是在构造器里面定义的。

1）我们为什么要在构造器里面定义？

答：对于创建一个实例对象时，我们对要传进来的数据进行接收，那么我们必须要写一个构造器来接收传进来的数据，但是如果我们要定义的数据是固定的，那么就可以不使用构造器的形式，而是使用赋值语句的方式定义一个属性接收数据。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Person {
            constructor(name,age) {
                this.name = name
                this.age = age
                this.school = "211大学"
            }
        }
        let p = new Person("张三",18)
        console.log(p);
    </script>
</body>
</html>

2）如何简化state？

既然我们要传的数据是固定的，那么就不需要构造器，直接使用赋值语句的方式定义属性，那么通过赋值语句定义的属性都会放在实例对象身上。那么我么就可以通过实例对象调用自身的属性，即this.xxx。

而对于下面的switchover 方法来说，必须使用箭头函数的形式，此时的this指向的就是实例对象，否则this为undefined。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="/react-development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="/react-dom-development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建组件
        class Weather extends React.Component {
            // 初始化状态
            // 赋值语句是放在对象实例身上的
            state = { isHot: false,wind: "微风" }
            // render调用1+n次
            render() {
                const { isHot,wind } = this.state
                return <h1 onClick={this.switchover}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
            }
            // 自定义方法--要用赋值语句的形式+箭头函数
            switchover = ()=> {
                 const isHot = this.state.isHot//此时的this指向的是Weather new出来的这个实例对象
                 this.setState({isHot: !isHot})
            }
        }
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(<Weather />, document.getElementById('test'))
    
    </script>
</body>

</html>