react setState工作原理

    技术2022-07-14  73

    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 内部的实现原理不是覆盖 是找对应的数据,去浅合并

    Processed: 0.015, SQL: 9