前端知识 |浅谈React setState

setState的连锁反应


这是一个React组件实现组件可交互所需的流程,render()输出虚拟DOM,虚拟DOM转为DOM,再在DOM上注册事件,事件触发setState()修改数据,在每次调用setState方法时,React会自动执行render方法来更新虚拟DOM,如果组件已经被渲染,那么还会更新DOM中去。这个过程,setState就像一个点燃引擎的火源,发动了React核心的调度层,然后直至渲染层的改变。
异步的setState
刚接触React的同学,对React的setState的使用偶尔会有一些偏颇,出现一些意料之外的情况。例如:
onFunction=()=>{
this.setState({value: []});
// 此刻立马取this.state做一些同步操作
console.log(this.state.value);

所以经常犯这个错的同学需要谨记下面这几点:

  1. setState是异步的,不会立即改变state的值。
  2. 多次setState调用生成的效果会合并。
  3. 第二个参数可以是一个回调函数。
  4. setState可以接受一个函数
    为什么要异步呢?

    每一次setState如果都引发一次组件更新,走完一圈生命周期,实在是有点粗糙和浪费,生命周期函数为纯函数性能应当还能够接受,可是render函数内返回的虚拟DOM去做比较这个就比较费时间了。
    直观的感受是,React将多个setState产生的修改放在一个队列里,缓一缓,攒在一起,等待时机,觉得差不多了再引发一次更新过程。这样,在每次更新过程中,会把积攒的setState结果合并,做一个merge的动作,节省render触发的频率。
    这样,对于开发者而言,可以在同步代码中随意多行调用setState函数而不用担心重复setState重复render的问题。
    然后,总是被大家误用不理解的也是这一点,所以后来,setState方法的第二个参数慢慢被进入大家的视野了,作为回调函数可以再次拿到新的this.state值。
    再后来,一个setState函数的隐藏功能进入了大家的视野,那就是setState可以接受一个函数作为参数。
    this.setState(function (state, props) {
    return {
    value: state.value - 1
    }
    });

原文地址:http://blog.51cto.com/13476205/2156594

时间: 2024-10-22 21:58:15

前端知识 |浅谈React setState的相关文章

前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件. 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npminstall --save echarts-for-react 第二步: 在我们的项目中导入: importReactEcharts from 'echarts-for-react' 第三步: 在 render 函数中使用: option={th

React | 高效前端之浅谈

React | 高效前端之浅谈 React在国外已被各个公司的各种产品大量使用,大众熟知的INS.Airbnb.Yahoo.ThoughtWorks等,都是使用React来实现UI开发的.很多人认为,虽然React在国外已经被广泛应用,但在国内,仍处新兴萌芽阶段.到底React在国内境遇如何?据海说科技了解,阿里内部系统.支付宝新一代框架.美团内部系统.知乎.滴滴.卖座电影.豆瓣等大型网站及平台正在运用React,或在进行系统重构.毫无疑问,React作为近两年前端三大流行框架之一,正成为程序员

前端架构浅谈

前端架构浅谈 0.前注 鉴于作者本人的能力有限(非常有限),并且依然在学习中,因此本文的高度和深度必然有所欠缺. 欢迎(并且非常欢迎)大家来批评指正,如果能详细的说明问题在哪里,如何解决和改正,那么就太感谢了!!! 我最喜欢听有理有据的批评了!! 本人QQ:20004604,邮箱:[email protected],期待你的交流. 1.为什么要有一个好的架构 首先明确一点,架构是为需求服务的. 前端架构存在的目的,就我个人理解来说,有以下几点: 1.提高代码的可读性. 一个好的架构,代码的可读性

【转】浅谈React、Flux 与 Redux

本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成单向的数据流 根据 state 的变化来更新 view 利用虚拟 DOM 来提升渲染性能 前面说到 React 能够根据 state 的变化来更新 view,一般来说引起 state 变化的动作除了来自外部(如服务器),大部分都来自于页面上的用户活动,那页面上的用户活动怎样对 state 产生作用呢?Reac

浅谈 React

机缘巧合认识React,翻了2天的资料,又整理了1天,也算是简单入门了;之前也学过angular,相比来说,的确React代码逻辑更加简单明了,理解起来也相对容易. React 具备以下特性:1.声明式设计 ?React采用声明范式,可以轻松描述应用. 2.高效 ?React通过对DOM的模拟,最大限度地减少与DOM的交互. 3.灵活 ?React可以与已知的库或框架很好地配合. 4.JSX ? JSX 是 JavaScript 语法的扩展.React 开发不一定使用 JSX ,但我们建议使用它

浅谈React工作原理

Reactjs 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内部通过state来维护组件状态的变化,当组件的状态发生变化时,React通过虚拟DOM技术来增量并且高效的更新真实DOM.本文将对React 的这些特点进行简单的介绍. 一个简单的React组件 -- HelloReact  考虑到有的同学还不曾了解过React,我们先来写一个简单的React组

浅谈React前后端同构防止重复渲染

作者:随风溜达的向日葵  什么叫前后端同构? 为了解决某些问题(比如SEO.提升渲染速度等)react 提供了2个方法在服务端生成一个HTML文本格式的字符串.在得到了这个HTML格式的字符串之后,通常会将其组装成一个页面直接返回给用户的浏览器. 到这里,服务端的活已经干完了,然后就是浏览器这边干活. 浏览器拿到HTML文本后,立刻进行渲染将内容呈现给用户.然后加载页面所需的 .js 文件,然后执行 JavaScript 脚本,然后开始初始化 react 组件---- 到这里问题就来了.reac

浅谈react受控组件与非受控组件

最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为空值而不是具体的传入的值.具体编辑页面中文本框相关的代码如下:         ... //render方法上面的内容省略  <FormItem       label="问题描述:"       hasFeedback      {...props.formItemLayout}  &g

浅谈react

现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 今天我想分享一下利用react编写数据流的方法, 那么什么事数据流?为什么要用数据流? 其实