react组件中的两类状态数据:props,state,官网API给出的使用规范,多读几遍,受益匪浅:

结论:

1. 对应任何可变的数据,理应只有一个单一“ 数据源 ”

2. 如果多个组件均需要这些数据,那可以将数据提升至离他们最近的共同祖先中,而不是尝试在不同组件中同步状态

3. 应该依赖自上而下的数据流

图2中所示的“ 炉墙代码 ”按目前的理解应该是在“ getDerivedStateFromProps/shouldComponentUpdate ”中按需求转化输入或者拒绝输入,待续...

4.  可以由其他props或者state推导出来的属性,则很可能不应该出现在state中。

初识react中的状态量的更多相关文章

  1. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  2. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  3. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  4. SSH 框架学习之初识Java中的Action、Dao、Service、Model-收藏

    SSH 框架学习之初识Java中的Action.Dao.Service.Model-----------------------------学到就要查,自己动手动脑!!!   基础知识目前不够,有感性 ...

  5. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  6. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  7. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  8. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  9. React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...

随机推荐

  1. BZOJ_3680_吊打XXX_模拟退火

    BZOJ_3680_吊打XXX_模拟退火 Description gty又虐了一场比赛,被虐的蒟蒻们决定吊打gty.gty见大势不好机智的分出了n个分身,但还是被人多势众的蒟蒻抓住了.蒟蒻们将 n个g ...

  2. 单次目标检测器-SSD简介

    SSD 是使用 VGG19 网络作为特征提取器(和 Faster R-CNN 中使用的 CNN 一样)的单次检测器.我们在该网络之后添加自定义卷积层(蓝色),并使用卷积核(绿色)执行预测. 同时对类别 ...

  3. CF 622 F The Sum of the k-th Powers —— 拉格朗日插值

    题目:http://codeforces.com/contest/622/problem/F 设 f(x) = 1^k + 2^k + ... + n^k 则 f(x) - f(x-1) = x^k ...

  4. POJ2184(01背包变形)

    Cow Exhibition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11092   Accepted: 4404 D ...

  5. 免证书发布ipa文件真机测试

    首先设备得越狱 众所周知,在Xcode上开发的程序只能在模拟器中运行,如果要放到真机上则要花费99美金购买开发者证书iDP.这严重阻碍了我等草根开发者探索的脚步.写个小程序,同学间分享一下这个小小的愿 ...

  6. node本地服务启动报Error: listen EADDRINUSE解决方法

    Error: listen EADDRINUSE 127.0.0.1:1337 at Object.exports._errnoException (util.js:1018:11) at expor ...

  7. Flutter实战视频-移动电商-39.路由_Fluro的路由配置和静态化

    39.路由_Fluro的路由配置和静态化 handler只是单个路由的配置,这节课我们要学习路由的整体配置 整体配置 新建routers.dart文件来做整体配置 detailsHandler就是我们 ...

  8. POJ - 2312 Battle City BFS+优先队列

    Battle City Many of us had played the game "Battle city" in our childhood, and some people ...

  9. Channel的使用

    Channel必须要通过buffer来读写 1. Channel需要通过IO流的getChannel()方法获取 2. buffer需要通过Channel的map()方法获取 package com. ...

  10. Android NDK开发指南(二)Android.mk文件

    http://www.cnblogs.com/yaozhongxiao/archive/2012/03/06/2382225.html 1.  概述 Android.mk文件是用来描述build sy ...