React组件的3种状态和setState循环调用

一、组件的三种状态

状态一:MOUNTING(正在加载)
mountComponent 负责管理生命周期中的 getInitialState、componentWillMount、render 和 componentDidMount。
1、Constructor(构造函数) 管理 getDefaultProps;
2、首先通过 mountComponent 装载组件;
3、将状态设置为 MOUNTING;
4、(1)执行 getInitialState 获取初始化 state,初始化更新队列;
5、(2)执行 componentWillMount,【【【在它内部调用 setState,不会触发 reRender,而是进行 state 合并】】】;
6、更新状态为 NULL【标注1】,更新state【标注2】 ;
7、(3)执行 render,在它内部可以获取更新后的 this.state 数据;
8、(4)执行 componentDidMount。

状态二:RECEIVE_PROPS(收到属性)
updateComponent 负责管理生命周期中的 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate。updateComponent 本质上也是通过 递归渲染 内容的,由于递归的特性,父组件的 componentWillUpdate 一定在其子组件的 componentWillUpdate 之前调用,而父组件的 componentDidUpdate 肯定在其子组件 componentDidUpdate 之后调用。
1、将状态设置为 RECEIVING_PROPS;
2、执行(1)componentWillReceiveProps,【【【在它内部调用setState,不会触发 reRender,会进行 state 合并】】】;
3、更新状态为 NULL【标注1】;
4、执行(2)shouldComponentUpdate判断是否需要进行组件更新;
5、执行(3)componentWillUpdate;
6、更新state【标注2】;
7、执行(4)render;
8、执行(5)componentDidUpdate;

状态三:UNMOUNTING(正在卸载)
unmountComponent 负责管理生命周期中的 componentWillUnmount。
1、将状态设置为 UNMOUNTING;
2、执行componentWillUnmount,在它的内部调用 setState,不会触发 reRender。
3、更新状态为 NULL【标注1】,完成组件卸载操作。

二、setState循环调用
1、调用 setState 时,如果当前状态不是 NULL,那么会进行state合并;如果当前状态是 NULL,那么会调用enqueueUpdate(列队更新) 执行更新,进而调用 updateComponent(更新组件), 进而调用 shouldComponentUpdate 和 componentWillUpdate。
2、如果在 shouldComponentUpdate 或 componentWillUpdate 中调用 setState,因为此时的状态是 NULL,所以就会调用 enqueueUpdate(列队更新) 执行更新,进而调用 updateComponent(更新组件), 进而调用 shouldComponentUpdate 和 componentWillUpdate,造成循环调用。
3、在render及它后面的生命周期里调用setstate,毫无疑问也会造成循环调用。
4、isBatchingUpdates默认是false,表示setState会同步更新this.state;另,对 NULL 进行布尔转换,也是false。

原文地址:https://www.cnblogs.com/gushixianqiancheng/p/10962971.html

时间: 2024-08-30 02:27:57

React组件的3种状态和setState循环调用的相关文章

总结 React 组件的三种写法 及最佳实践

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

React 组件间通讯

React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父子:Parent 与 Child_1.Child_2.Child_1_1.Child_1_2.Child_2_1 兄弟:Child_1 与 Child_2.Child_1_1 与 Child_2.etc. 针对这些关系,我们将来好好讨论一下这些关系间的通讯方式. (在 React 中,React 组

如何写好react组件

react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Create React App路由4.0的异步组件加载(Code Splitting) React进阶--使用高阶组件(Higher-order Components)优化你的代码 Higher-order Components 高阶组件 redux方面: Redux-saga 中文文档 https:

03.React组件基础

React组件介绍 1.组件是React 的一等公民.使用React就是在用组件 2.组件表示页面中的部分功能 3.组合多个组件实现完整的页面功能 4.特点:可复用,独立,可组合 React组件的两种创建方式 1.使用函数创建组件 //函数组件:使用JS 的函数(或箭头函数)创建的组件 //约定1:函数名称必须以 大写字母开头 //约定2:函数组件 必须有返回值,表示该组件的结构 //如果返回值为null,表示不渲染任何内容 function Hello(){ return( <div>这是我

02-Hibernate实体类的三种状态

一.Hibernate的实体类有三种状态 Transient:瞬时状态,不被hibernate session管理,而且实体数据在数据库不存在 Persistent:持久化状态,被session管理,此时的对象被放在session的缓存中,实体对象存在数据库中. Detached:离线状态,实体对象在数据库中有数据与之对应,但是不被session管理 注意:被session所管理的实体对象,当对象的属性发生改变,在提交事务的时候会自动更新改变后的属性到数据库中. 下图是hibernate试题对象

react学习笔记1之声明组件的两种方式

//定义组件有两种方式,函数和类 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } class Welcome extends React.Component{ render(){ return <h1>Hello, {this.props.name}</h1>; } } ReactDOM.render( <Welcome name="kevin"/&g

[转] 深入理解React 组件状态(State)

React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适的State,是正确创建组件的第一步.State必须能代表一个组件UI呈现的完整状态集,即组件的任何UI改变,都可以从State的变化中反映出来:同时,State还必须是代表一个组件UI呈现的最小状态集,即State中的所有状态都是用于反映组件UI的变化,没有任何多余的状态,也不需要通过其他状态计算

react创建组件的三种方式

react创建组件的三种方式: 1.函数式无状态组件 2.es5方式React.createClass组件 3.es6方式extends React.Component 三种创建方式的异同   1.函数式无状态组件 (1)语法 1 function myComponent(props) { 2 return 3 <div>Hello {props.name}</div> 4 } (2)特点 ● 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到state状态

React创建组件的三种方式及区别

React创建组件具体的三种方式: 1.函数式定义的无状态组件 2.es5原生方式React.createClass定义的组件 3.es6形式的extends React.Component定义的组件 虽然有三种方式可以定义React组件,但是它们有什么不同呢?什么情况下应该使用哪种定义方式呢?请继续往下看 接下来我们先说一下三种方式有什么区别? 1.无状态函数式组件 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作. 无状态函数式组件形式上表现为