关于setState 异步 的一些问题

关于setState ,我们首先要有个正确的认识,官网中给出的解释是setState不是保证同步的

这说明它有时候是同步的有时候的异步的,那什么时候是同步,什么时候是异步?

答案是在React库控制之内时,它就会以异步的方式来执行,否则以同步的方式执行。

但大部份的使用情况下,我们都是使用了React库中的组件,例如View、Text、Image等等,

它们都是React库中人造的组件与事件,是处于React库的控制之下,在这个情况下,

setState就会以异步的方式执行。

比如这里有个例子

constructor(props) {
    super(props);
    this.state = {
      name:"lisi"
    };
  }

pushnext(){
    this.setState({
      name:"zhangsan"
    });  alert(this.state.name)
} ListHeaderComponent() {   return (     <TouchableOpacity onPress={()=>this.pushnext()}>      <Text style={{width: deviceWidth,backgroundColor: ‘yellow‘ }}>这是头部</Text>     </TouchableOpacity>    )  }

我这里pushnext()方法里面alet 的东西就是"lisi",因为这里setState 在这里是异步执行,那么

要想alert出来"zhangsan"应该怎么做呢?

有两种方式

 一、使用setState的第二传参,传入一个回调(callback)函式,改为像下面这样的代码

pushnext(){
    this.setState({
      name:"zhangsan"
    } ,function(){
        alert(this.state.name)
     });
}

二、使用InteractionManager.runAfterInteractions

pushnext(){
    this.setState({
      name:"zhangsan"
    });
InteractionManager.runAfterInteractions(() => {
           alert(this.state.name);
        });
}

关于setState异步执行还有一个衍生的问题值得探讨就是它独特存在的

setState可能会引发不必要的渲染(renders)

state本身的设计是无法直接更改,setState的设计是用来更动state值,

也会触发重新渲染(re-render),按照逻辑就是反正不管如何,只要开发者呼叫setState

React就去作整个视图的重新渲染就是。所以setState必定会作重新渲染的执行,只是要如何渲染是由React来决定。

重新渲染(re-render)指的主要是页面上视图(View)的重新再呈现,这是React原本的核心设计,

但这个设计是有一些问题的。最主要的是state(状态)并不一定单纯只用来记录与视图(View)有关的状态,

也有可能是某个内部控制用的属性值,或是只套用在内部使用的资料。当你改变了这些与视图无关的state(状态)值,

以现在的React设计来说,照样要触发重新渲染的执行过程,这在某些复杂的应用时,由于造成不必要的渲染,

也有可能造成效能上的问题。

React提供了shouldComponentUpdate方法让开发者可以自行判断,自行提供对应的解决方式,

算得上是一种补墙的方法

那么shouldComponentUpdate怎么使用呢?

我们假如一个场景,在一个界面,你在push到下一个界面的时候有个setState方法,如:

pushnext(){
    this.setState({
      name:"zhangsan"
    } ,function(){
      this.props.navigation.navigate(‘Chat‘,{name:this.state.name});
     });
}

你要把这个name传给下一个界面,但是你传的时候有setState,这就会导致该界面又会render一遍,

(有兴趣的小伙伴可以测试一下)这个时候,我们就可以用到shouldComponentUpdate。

我的代码如下

shouldComponentUpdate(nextProps, nextState){
     return this.state.others !== nextState.others;
  }

这句话什么意思呢?这里的 this.state.others 其实是我这个界面需要渲染出来的值,它是我通过网络获取的,

网络获取之前render第一遍,这个时候this.state.others是空,网络获取后this.state.others有值了,

在 shouldComponentUpdate里面一判断发现两者不一样,返回true,然后开始执行render,

把this.state.others render出来了,之后在执行上面的 pushnext()方法,本来要执行render()方法的,

但是一执行shouldComponentUpdate()方法 ,发现这两个值是没有改变,是一样的,所以不再render,

跳转到下一界面。

以上就是我对setState的理解,如有不正确的地方,欢迎大家指正批评

				
时间: 2024-08-26 22:10:42

关于setState 异步 的一些问题的相关文章

React的setState分析

前端框架层出不穷,不过万变不离其宗,就是从MVC过渡到MVVM.从数据映射到DOM,angular中用的是watcher对象,vue是观察者模式,react就是state了. React通过管理状态实现对组件的管理,通过this.state()方法更新state.当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI. 本文针对React的SetState的源码来进行解读,根据陈屹老师的<深入React技术栈>加上自己的理解. 1. setState异

从 setState promise 化的探讨 体会 React 团队设计思想

从 setState 那个众所周知的小秘密说起... 在 React 组件中,调用 this.setState() 是最基本的场景.这个方法描述了 state 的变化.触发了组件 re-rendering.但是,也许看似平常的 this.setState() 里面却也许蕴含了很多鲜为人知的设计和讨论. 相信很多开发者已经意识到,setState 方法"或许"是异步的.也许你觉得,看上去更新 state 是如此轻而易举的操作,这并没有什么可异步处理的.但是要意识到,因为 state 的更

React中setState注意事项

setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正确写法:setState异步函数第二个回调函数在第一个参数执行完成后执行 结果: 原文地址:https://www.cnblogs.com/nayek/p/12361525.html

React的父子组件生命周期

父子组件生命周期: “生命周期”细想之下有点浪漫主义色彩,不知道是不是从lifecycle英译过来的.作为一个前端从业者,如果让我来取,可能会取成“渲染周期”之类的,毕竟是和浏览器打交道的职业,浏览器的layout使dom树具有骨架,paint则让整个页面光亮起来. React 的一切都是组件,通过 React.createElement 方法来创建嵌套层级,说白了在内存中构建对象树,据此渲染到浏览器中成为dom树,这个时候一个节点是什么时候真正渲染到页面中就变得重要起来,因为只有这个时候你才能

react相关面试题

React 的核心流程可以分为两个部分: reconciliation (调度算法,也可称为 render): // 调和 更新 state 与 props: 调用生命周期钩子: 生成 virtual dom: 这里应该称为 Fiber Tree 更为符合: 通过新旧 vdom 进行 diff 算法,获取 vdom change: 确定是否需要重新渲染 commit: 如需要,则操作 dom 节点更新: constructor ====> 初始化state componentWillMount

前端随心记---------前海面试汇总

react里面:state和prop的区别?setState为什么是异步的?组件传值有几种方式? 答:1.prop用于定义外部接口,state用于记录内部状态.2.prop的赋值在外部使用组件时,state的赋值在组建内部.3.组件不应该改变prop的值,但是state的存在目的是让组件来改变. 2.setState异步更新状态使得并发更新组件成为可能. 资料:https://segmentfault.com/a/1190000013040438?utm_source=tag-newest 3.

React中的性能优化

1. 作用域的修改放在constructor中 constructor (props) { super(props) // 当组件的state或者props发生改变的的时候,render函数就是重新执行 this.state = { inputValue: '', list: [] } // 将this指向放在constructor中执行,在复杂的组件开发中节约性能 this.handleInputChange = this.handleInputChange.bind(this) this.h

ref和setState合用时,怎样解决dom无法及时更新:setState是一个异步函数,但是提供了第二个参数,当dom更新完后后执行第二个参数里的内容

原文地址:https://www.cnblogs.com/ladybug7/p/12432483.html

React中setState同步更新策略

本文和大家分享的主要是React中setState同步更新相关内容,希望对大家学习React有所帮助. 为了提高性能React将setState设置为批次更新,即是异步操作函数,并不能以顺序控制流的方式设置某些事件,我们也不能依赖于 this.state 来计算未来状态.典型的譬如我们希望在从服务端抓取数据并且渲染到界面之后,再隐藏加载进度条或者外部加载提示: componentDidMount() { fetch('https://example.com') .then((res) => re