浅入深出setState（上篇）

wow_worktile 发布于2019-08-22 18:40 / 2547人阅读

摘要：点燃引擎这是一个组件实现组件可交互所需的流程，输出虚拟，虚拟转为，再在上注册事件，事件触发修改数据，在每次调用方法时，会自动执行方法来更新虚拟，如果组件已经被渲染，那么还会更新到中去。

Part one - setState点燃引擎

这是一个React组件实现组件可交互所需的流程，render()输出虚拟DOM，虚拟DOM转为DOM，再在DOM上注册事件，事件触发setState()修改数据，在每次调用setState方法时，React会自动执行render方法来更新虚拟DOM，如果组件已经被渲染，那么还会更新到DOM中去。 这个过程，setState就像一个点燃引擎的打火石，发动了React核心的调度层，然后直至渲染层的改变。

Part two - setState是异步的

刚接触React的同学，对React的setState的使用偶尔会有一些偏颇，出现一些意料之外的情况。
比如：

onClickForReset=()=>{
    this.setState({value: []});
    // 此刻立马取this.state做一些同步操作
    console.log(this.state.value);
}

或者是

increateCount(){
    this.setState({count: this.state.count + 1});
    this.setState({count: this.state.count + 1});
    this.setState({count: this.state.count + 1});
}

我们可以看一个现在的例子：
https://codesandbox.io/s/qqy9n5o2m9

setState比较熟练的同学可以跳过这一段代码，但是有些刚学会使用React的同学经常会犯这个错误，一开始我只能粗暴地说：

setState是异步的，不会立即改变state的值。

多次setState调用生成的效果会合并。

第二个参数可以是一个回调函数。

setState可以接受一个函数（例子改动）

后来我逐渐也在想下面这两个问题，现在这篇文章试图尽量弄清的两件事：

为什么要把setState设计成异步的，缘由是什么，解决了什么问题，有什么好处？

如何实现异步的setState，整体原理是怎样的，有没有什么特殊的骚操作？

我们可以自己也想一想，下面留给大家一片空白区。

云服务器 GPU云服务器浅入深出由浅入深 setState 浅入浅出

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96075.html

JavaScript五十问——浅入深出，自己实现一个 ES 6 Promise

摘要：以上实现了最简单的一个测试代码当然，这不能算是一个，目前仅仅实现了根据状态调用不同的回调函数。静态函数接下来是的各种静态函数每一个都执行完毕后返回总结现在，一个完整的对象就完成了。前言说到 ES6，Promise 是绕不过的问题；如果说 ES6 的 Class 是基于 Javascript 原型继承的封装，那么 Promise 则是对 callback 回调机制的改进。这篇文章，不...

hiyayiji 2019-08-23 14:40 评论0 收藏0
PHPer 面试指南-扩展阅读资源整理

摘要：前端篇收集的前端面试题和答案前端开发面试题史上最全的前端面试题汇总及答案前端工程师手册协议工作原理协议运行机制的概述协议篇原理原理解析的工作原理与的区别理解后端篇年的面试总结垃圾回收机制面向对象设计浅谈说清楚是什么和的区别索引原理及慢查前端篇收集的前端面试题和答案前端开发面试题史上最全的web前端面试题汇总及答案前端工程师手册 HTTP协议：工作原理 SSL/TLS协议运行...

wemall 2019-06-28 18:19 评论0 收藏0
从项目中由浅入深的学习koa 、mongodb(4)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习从项目中由浅入深的学习前言的出现前端已经可以用一把梭从前端写到后台。 showImg(https://segmentfault.com/img/bVbrRI5?w=1920&h=1080); 序列文章从项目中由浅入深的学习vue,微信小程序和快应用 (1)从项目中由浅入深的学习react (2)从项目中由浅入深的学...

null1145 2019-06-26 18:01 评论0 收藏0
从项目中由浅入深的学习typescript (3)

摘要：序列文章从项目中由浅入深的学习微信小程序和快应用从项目中由浅入深的学习前言为什么会有大家有没想过这个问题原因是是弱类型编程语言也就是申明变量类型可以任意变换。是的超集，也相当于预处理器本文通过一个项目来让你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章从项目中由浅入深的学习vue,微信小程序...

ninefive 2019-08-23 16:59 评论0 收藏0