详解React中setState回调函数

 更新时间:2018年06月14日 09:30:44   作者:化风  
这篇文章主要介绍了详解React中setState回调函数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在使用React过程中,中可以使用this.state来访问需要的某些状态,但是需要更新或者修改state时,一般而言,我们都会使用setState()函数,从而达到更新state的目的,setState()函数执行会触发页面重新渲染UI。但是!!!setState是异步的!!!

1. 语法:

setState(updater[, callback]) //

updater是要改变的state对象,callback是state导致的页面重新渲染的回调,等价于componentDidUpdate
一般而言,在设置页面某些state的时候,需要先设置好state,然后再对页面的一些参数进行修改的时候,可以使用setState的回调函数。

2. 分析一下区别

不在回调中使用参数,我们在设置state后立即使用state:

this.state = {foo: 1};
this.setState({foo: 123});
console.log(this.state.foo);
// 1

在回调中调用设置好的state

this.state = {foo: 2};
this.setState({foo: 123}, ()=> {
 console.log(foo);
 // 123
});

关于setState的回调函数的作用大概如此,这个函数相当于componentDidUpdate函数,和生命周期的函数类似。

3. 注意:

  1. 刚说了,setState是异步的!不保证数据的同步。
  2. setState更新状态时可能会导致页面不必要的重新渲染,影响加载。
  3. setState管理大量组件状态也许会导致不必要的生命周期函数钩子调用。

参考文档:https://facebook.github.io/react/docs/react-component.html#setstate

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • React引入css的三种方式小结

    React引入css的三种方式小结

    这篇文章主要介绍了React引入css的三种方式小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 基于PixiJS实现react图标旋转动效

    基于PixiJS实现react图标旋转动效

    PixiJS是一个开源的基于web的渲染系统,为游戏、数据可视化和其他图形密集型项目提供了极快的性能,这篇文章主要介绍了用PixiJS实现react图标旋转动效,需要的朋友可以参考下
    2022-05-05
  • React diff算法的实现示例

    React diff算法的实现示例

    这篇文章主要介绍了React diff算法的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Unity RectTransform详解

    Unity RectTransform详解

    unity中的ui元素是有严格的父子关系的,子物体的位置是根据父物体的变化而变化的,而子物体和父物体联系的桥梁就是Anchor,本文重点介绍Unity RectTransform的相关知识,感兴趣的朋友一起看看吧
    2024-01-01
  • React高级特性Context万字详细解读

    React高级特性Context万字详细解读

    React的context就是一个全局变量,可以从根组件跨级别在React的组件中传递。React context的API有两个版本,React16.x之前的是老版本的context,之后的是新版本的context
    2022-11-11
  • React模仿网易云音乐实现一个音乐项目详解流程

    React模仿网易云音乐实现一个音乐项目详解流程

    这篇文章主要介绍了React模仿网易云音乐实现一个音乐项目的详细流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 解决React报错Unexpected default export of anonymous function

    解决React报错Unexpected default export of an

    这篇文章主要为大家介绍了React报错Unexpected default export of anonymous function解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • flouting ui定位组件完美替代ant deisgn使用详解

    flouting ui定位组件完美替代ant deisgn使用详解

    这篇文章主要为大家介绍了flouting ui定位组件完美替代ant deisgn使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • React项目经验总结及遇到的坑

    React项目经验总结及遇到的坑

    这篇文章主要介绍了React项目经验总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • Remix集成antd和pro-components的过程示例

    Remix集成antd和pro-components的过程示例

    这篇文章主要为大家介绍了Remix集成antd和pro-components的过程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03

最新评论