一、设计合适的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的更多相关文章

  1. React组件State提升(译)

    译自:https://reactjs.org/docs/lifting-state-up.html (适当进行了裁减) 通常我们会碰到这样的情况,当某个组件的state数据改变时,几个React组件同 ...

  2. 【05】react 之 组件state

    1.1.  状态理解 React的数据流:由父节点传递到子节点(由外到内传递),如果顶层组件某个prop改变了,React会向下传递,重新渲染所有使用过该属性的组件.除此之外React 组件内部还具有 ...

  3. React重置非受控组件state的方法

    如果想通过props来重置state的值.有3种方法: 1. 最好的方法:key属性 修改key属性的值,可以使组件卸载后重新加载.所有的状态全部重置. 这种情况可以给key设一个每次渲染都会改变的值 ...

  4. 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 ...

  5. 说说React组件的State

    说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...

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

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

  7. React组件的State

    React组件的State 1.正确定义State React把组件看成一个状态机.通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致.组件的任何UI改变,都可以从State的变化 ...

  8. 前端笔记之React(二)组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

  9. react+dva 全局model中异步获取数据state在组件中取不到值

    先上结论,不是取不到,是写法有问题. 全文分4部分,1是问题描述,2是一开始的解决想法(错误做法),3是问题产生原因的思考,4是正常解决方法.只想看结论直接跳4 1.问题描述 接触react dva一 ...

随机推荐

  1. LoadRunner之Block

    如何在一个脚本中实现不同事务不同次数的循环呢? 案例:假如你想在一个脚本中,实现登录执行1次,查询执行2次,插入执行3次,怎么办?录3个脚本?每个事务分别在脚本中复制N次? 当然不用,LR早就想到了你 ...

  2. python 输入年月日,返回当天是星期几

    引入内置模块calendar,输入年.月.日,根据weekday(year,month,day)的返回值,输出该日期是星期几.函数weekday()返回0-6分别对应星期一至星期日 import ca ...

  3. 010.Oracle数据库 , ORDER BY 按升序降序排序

    /*Oracle数据库查询日期在两者之间*/ SELECT DISTINCT ATA FROM LM_FAULT WHERE ( OCCUR_DATE BETWEEN to_date( '2017-0 ...

  4. SQL创建表格——手写代码

    打开phpstudy,打开Navicat for MySQL,进入要创建表格的数据库,点击上方“查询”按钮,“创建查询”,即可输入代码进行创建. 例: create table class( clas ...

  5. Django 项目搭建

    django(mvt结构) 虚拟环境 创建虚拟环境 mkvirtualenv django_py3 -p python3 切换虚拟环境 wokeon 虚拟环境名称 删除虚拟环境 rmvirtualen ...

  6. docker-compose(grafana influxdb) + telegraf 快速搭建简单监控

     灵活实现方案:   1:     telegraf 为go 语言写得占用内存小 收集主机各项监控数据 定时写入 时序DB   influxdb ------------------------&qu ...

  7. 【剑指Offer】面试题28. 对称的二叉树

    题目 请实现一个函数,用来判断一棵二叉树是不是对称的.如果一棵二叉树和它的镜像一样,那么它是对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的.     1    / \   2   2 ...

  8. CentOS 6.x 重置root 密码

    1.重启,进入启动界面,快速按e,进入GNU GRUB界面. 2.选择第二项,按e,进行编辑. 3.在末尾输入1或single,回车,返回上一界面,还是选第二项,按b,进入单用户模式. 此时输入命令  ...

  9. CocosCreator - 向上传递事件(冒泡)

    /** *   分发事件到事件流中. *   this.node.dispatchEvent(new cc.Event.EventCustom("name",是否向上传递)) *  ...

  10. Elasticsearch常用的设置

    action.destructive_requires_name: true     用于设置删除只限于特定名称指向的数据, 而不允许通过指定 _all来删除所有索引