react中setState的理解

1、判断是否可以做为一个state的条件:

    1、变量如果是通过props从父组件中获取,就不是一个状态

​    2、如果这个变量可以通过其他的状态state或者属性props 通过数据处理得到,就不是一个状态

  3、如果变量在render中没有使用到,那就不是一个state

​    4、变量在整个生命周期中都保持不变时,也不是一个状态

2、state和props的区别

State可变的,是组件内部维护的一组用于反映组件UI变化的状态集合;

Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。在组件状态上移的场景中,父组件正是通过子组件的Props,    传递给子组件其所需要的状态。

在使用state的时候, 如果我们企图直接修改state中的某一个值之后直接打印(使用)他,就会发现,他其实并没有改变。

示例:

企图通过点击事件之后就使用修改之后的state的值,但是会发state中的并没有被立即修改,还是原先的值,我们都知道那是因为     setState就相当于是一个异步操作,不能立即被修改

3、格式

第一种setstate()格式

 第一个参数是一个对象,第二个参数是一个回调函数,这个回调函数是在setstate执行完并页面渲染了之后再执行,但是这种修改的方式不稳妥,因为是直接修改,我还是比较喜欢使用第二种格式

格式一

第二种格式

接收一个回调函数,而不是一个对象,这个回调函数有两个参数,一个是接收前一个状态值作为第一个参数,并将更新后的值作为第二个参数

格式二

4、setState源码 原理

1、当调用setState时,实际上会执行enqueueSetState方法,并对partialState以及_pendingStateQueue更新队列进行合并,最终通过enqueueUpdate执行state更新

2、 如果组件当前正处于update事务中,则先将Component存入dirtyComponent中。否则调用batchedUpdates处理。

而performUpdateIfNecessary方法获取pendingElement、pendingStateQueue、_pendingForceUpdate,并调用reciveComponent和updateComponent方法进行组件更新。 

3、batchedUpdates发起一次transaction.perform()事务  

4、开始执行事务初始化,运行,结束三个阶段      初始化:事务初始化阶段没有注册方法,故无方法要执行      运行:执行setSate时传入的callback方法,一般不会传callback参数      结束:更新isBatchingUpdates为false,并执行FLUSH_BATCHED_UPDATES这个wrapper中的close方法  

5、FLUSH_BATCHED_UPDATES在close阶段,会循环遍历所有的dirtyComponents,调用updateComponent刷新组件,并执行它的pendingCallbacks, 也就是setState中设置的callback。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容