day03--react中setState的使用

一、setState

state状态必须通过setState进行更新，且更新是一种合并，不是替换。

下面通过一个切换状态的例子说明

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 {
            // 构造器调用一次
            constructor(props) {
                super(props)
                this.state = { isHot: false,wind: "微风" }
                this.switchover = this.switchover.bind(this)
            }
            // render调用1+n次
            render() {
                const { isHot,wind } = this.state
                return <h1 onClick={this.switchover}>今天天气很{isHot ? '炎热' : '凉爽'},{wind}</h1>
            }
            // 点几次就调几次
            switchover() {
                // 由于changeWeather作为onClick的回调，所以不是通过实例调用的，是直接调用
                // 类中的方法默认开启了局部的严格模式，所以switchover中的this为undefined
                 const isHot = this.state.isHot
                //  注意：状态必须通过setState进行更新，且更新是一种合并，不是替换
                 this.setState({isHot: !isHot})
                //  严重注意：状态不可以直接更改，下面这行就是直接更改！！！
                // this.state.isHot = !isHot
            }
        }
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(<Weather />, document.getElementById('test'))
    
    </script>
</body>

</html>

1.通过ES6的语法：class类来创建一个类式组件，该类继承自父类React.Component。

2.该类式组件中定义一个构造器，在构造器中必须调用super(props)这方法，且该方法必须是在自定义属性之前调用。

3.在构造器里面定义一个状态state，该state是在父类身上的，子类是通过实例对象沿着原型链获取到父类的state,即this.__props__state,__props__可以省略不写---》this.state。

4一开始state是为null，所以我们开发者可以给state赋值，将状态在页面渲染。

上面的例子中定义了一个state对象，该对象有isHot和wind属性，即this.state = {isHot: false,wind: '微风'}，然后在页面中渲染。

然后定义一个切换方法switchover对状态进行改变。

重点：如何修改state？

1）首先在元素中绑定点击事件：在原始html中是使用onclick，而在react中是使用onClick，这里要注意。

2）通过onClick来绑定switchover事件，但在switchover中如何修改？里面的this指向的是谁？

答：由于switchover作为onClick的回调，所以不是通过实例调用的，是直接调用，而在类里面定义的方法，默认是开启了严格模式，所以方法里面的this谁都不指向，为undefined。所以此时switchover里面的this为undefined。

我们要修改state状态，就要拿到state，而state在实例对象上，所以要想办法将switchover里面的this指向实例对象。

3）那么通过bind()方法来改变this的指向，并返回新的函数。

在构造器里面实现this.switchover = this.switchover.bind(this)，此时的this是实例对象，这样就将类中定义的switchover方法里面的this指向实例对象，并定义一个同名的实现来接收，这样onClick绑定的就是构造器定义的switchover。那么状态就可以通过setState进行更新，且更新是一种合并，不是替换。