react-setState

1、在react中想让视图更新 必须让render函数重新执行 必须调用 setState这个方法
2、setState 其实是把参数对应的这个对象合并到 this.state 中 如果有相同的 属性名 会直接覆盖掉
3、setState(对象,函数) 必须传一个对象 也可以传一个函数 函数会在数据更新后执行
4、vue DOM更新是异步的
5、setState 这个函数执行是同步的 里面的数据更新是异步的 不论写再多的setState 里面的数据都会合并在一起 最终执行一次

import React from 'react';
import reactDOM from "react-dom"

// 在react中想让视图更新 必须让render函数重新执行 必须调用 setState这个方法
// setState 其实是把参数对应的这个对象合并到 this.state 中 如果有相同的 属性名 会直接覆盖掉
// setState(对象,函数) 必须传一个对象   也可以传一个函数 函数会在数据更新后执行
// vue DOM更新是异步的
// setState 这个函数执行是同步的 里面的数据更新是异步的 不论写再多的 setState 里面的数据都会合并在一起 最终执行一次


class App extends React.Component {
    constructor() {
        super()
        this.state = {
            name: "清欢",
            ary: [1, 2, 3, 4],
            arr: [5, 6, 7, 8, 9]
        }
    }

    // this.state 也可以写在外面 写在外面也是私有属性 写在外面不加 this 即可
    // state = {
    //     name: "清欢",
    //     ary: [1, 2, 3, 4],
    //     arr: [5, 6, 7, 8, 9]
    // }

    add(ary) {
        ary.push(100)
        console.log(ary);
        this.setState({})
    }

    merge(arr) {
        arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log(arr);
        // 把 this.state 中的 arr 地址 合并掉(顶替/覆盖)
        this.setState({
            arr: arr,
            qqq: 123,
            name: "小猪"   // 数据更新是异步
        }, function () {
            // 数据更新后会执行该函数
            console.log(this.state.name)
        })

        this.setState({
            aaa: arr
        })

        this.setState({
            bbb: arr
        })

        console.log(this.state.name)
        console.log(this.state);
    }

    minus() {
        this.state.arr.pop()
        // 也可以直接更改数据 下面重新调用 this.setState({}) 方法 让 render函数执行
        this.state.name = "小猪"
        this.setState({})
    }

    render() {
        let { name, ary, arr, qqq } = this.state
        console.log(ary);
        console.log(arr);
        return <div>
            <h1>{name}---{qqq}</h1>

            <ul>
                {ary.map(item => <li key={item}>{item}</li>)}
            </ul>

            <ul>
                {arr.map(item => <li key={item}>{item}</li>)}
            </ul>

            {/* 事件   事件名 = {对应的函数体}   函数体一般都在原型上 */}
            {/* 用bind改变this指向 让它指向自己的实例 */}
            <button onClick={this.add.bind(this, ary)}>添加</button>

            {/*
                render 函数体中的this 就是当前的实例;
                箭头函数中的this 是上级作用域的;
                函数执行 点 前边是谁 this就是谁 
             */}
            <button onClick={(arr) => { this.merge(arr) }}>合并</button>

            <button onClick={() => { this.minus() }}>删除</button>
        </div>;
    }
}

reactDOM.render(<>
    <App />
</>, document.querySelector("#root"))