react setState工作原理

setState(updater, [callback])

1 updater: 通过函数或对象 更新数据 FUNCTION/OBJECT

2 callback: 更新成功后的回调 FUNCTION

    buttonOnClick=()=>{
        this.setState({  
            list:[...this.state.list,this.state.inputValue],
            inputValue:""  //正加后input框的值为空
        },()=>{ //setState 完成之后的回调
        console.log(this.ul.querySelectorAll("li").length) //写在回调之后
        })
    }

3 异步:react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能

    Fn=()=>{
        let StateNub = this.state.nub //方法2 新建变量
        this.setState({            
            nub : StateNub +1, //内部的实现原理不是覆盖 是找对应的数据，去浅合并
            sex: "可爱的胖子"
        })
    }
    //里面写个函数
    setName=()=>{
        this.setState(()=>{
            return {name:'你好'}
        })
    }
    render() {   //render方法 要有返回值
        // let {nub} = this.state   //方法1 解构  p标签里直接写{p}
        return ( 
            <div>
                <button
                // 当点击事件里触发多个函数时这么写，
                // setState渲染原理：
                // 当Fn执行完setState修改值 render不渲染 ，等着setName修改完render在渲染
                 onClick={()=>{
                    this.Fn()
                    this.setName()
                 }
                }
                >
                长大了
                </button>
            </div>
        );
    }

4 浅合并 Object.assign()
this.setState 内部的实现原理不是覆盖 是找对应的数据，去浅合并