组件state
一、设计合适的state
1.1 定义:
state代表一个组件UI呈现的完整状态
stae代表一个组件UI呈现的最小状态集【所有状态都用于组件UI的变化,没有任何多余的状态】
1.2 state和props区别:
state:组件内部维护自己的状态,是可变的
props:只能通过父组件传递过来。
1.3判断一个组件是否为state:
*变量是否通过props从父组件获取
*变量是否在整个声明周期保持不变
*是否可以通过其他状态或属性计算得到
*是否在render方法中使用
二、正确修改state
2.1 不能直接修改state
2.2 state的更新是异步的
2.3sttae的更新是一个合并的过程
2.4state与不可变对象:
*不可变类型(number;string;boolean;null;undefined)【直接给要修改的状态赋一个新值】
*数组 【使用concat;slice;filter返回一个新数组,不改变原数组】
*普通对象【Object.assgin】
三、父子组件之间的通讯
父子:父组件向子组件的props传递数据
子父:父组件通过子组件的prop,给子组件传递一个回调函数
四、兄弟组件通讯
兄弟组件间不能互相传递数据,只能把组件间共享的状态保存到距离他们最近的共同组件内
组件state的更多相关文章
- React组件State提升(译)
译自:https://reactjs.org/docs/lifting-state-up.html (适当进行了裁减) 通常我们会碰到这样的情况,当某个组件的state数据改变时,几个React组件同 ...
- 【05】react 之 组件state
1.1. 状态理解 React的数据流:由父节点传递到子节点(由外到内传递),如果顶层组件某个prop改变了,React会向下传递,重新渲染所有使用过该属性的组件.除此之外React 组件内部还具有 ...
- React重置非受控组件state的方法
如果想通过props来重置state的值.有3种方法: 1. 最好的方法:key属性 修改key属性的值,可以使组件卸载后重新加载.所有的状态全部重置. 这种情况可以给key设一个每次渲染都会改变的值 ...
- SPRING IN ACTION 第4版笔记-第八章Advanced Spring MVC-002-SpringFlow的组件(state\<transition>\<var>\<set>\<evaluate>)
一. In Spring Web Flow, a flow is defined by three primary elements: states, transitions,and flow dat ...
- 说说React组件的State
说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...
- [转] 深入理解React 组件状态(State)
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- React组件的State
React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...
- 前端笔记之React(二)组件内部State&React实战&表单元素的受控
一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...
- react+dva 全局model中异步获取数据state在组件中取不到值
先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...
随机推荐
- python2学习------基础语法5(常用容器以及相关操作)
1.list(列表) #生成数据list a=[x for x in range(10)]; #print a; #遍历list for i in a: pass; #print i; #追加元素 a ...
- 文本处理三剑客与shell正则表达式
文本处理三剑客 提到对于文本的处理上,除了vim这个强大的编辑器之外,还有使用命令的形式去处理你要处理的文本,而不需要手动打开文本再去编辑.这样做的好处是能够以shell命令的形式将编辑和处理文本的工 ...
- 二进制枚举之被RE完虐的我的一天
记录一道学长们说有点难度的题目 好好玩啊这道题 ACM程序设计大赛是大学级别最高的脑力竞赛,素来被冠以"程序设计的奥林匹克"的尊称.大赛至今已有近40年的历史,是世界范围内历史最悠 ...
- 018、MySQL取满足日期在两个日期之间的所有数据
#查询 SELECT GZJK_CREATEDATE FROM abc_table WHERE ( ( GZJK_CREATEDATE >= UNIX_TIMESTAMP( '2019-08-0 ...
- java学习之IO流(学习之旅,一)
个人在学习IO流的时候看到如下所示java 流类图结构的时候,我的感想是,这么多··处于蒙的状态. Java流类图结构 这么多,没有分类不好学,那我们就慢慢一口一口的吃,这样每天学习一点就好了,其实很 ...
- MySQL如何获取时间戳
时间戳函数:current_timestamp() 将时间列格式设为timestamp,设定其默认值为CURRENT_TIMESTAMP. 插入一条新纪录,数据库就会自动在时间列存储当前时间.
- windows搭建安装react-native环境
在win10环境下,利用Genymotion模拟器,配置react-native的环境. 一.安装JDK 在网上下载jdk,版本最好是1.8以上.安装后要对环境变量进行配置. 同时在 Path 中配置 ...
- django ORM多对多正向查询时查询返回结果为None
表 class Books(models.Model): '''书籍''' id = models.AutoField(primary_key=True) name = models.CharFiel ...
- 吴裕雄--天生自然java开发常用类库学习笔记:观察者设计模式
import java.util.* ; class House extends Observable{ // 表示房子可以被观察 private float price ;// 价钱 public ...
- DevOps - 与敏捷方法区别
章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...