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. [SDOI 2015] 星际战争

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=3993 [算法] 首先发现问题具有单调性 , 不妨二分答案mid 考虑网络流 : 将源 ...

  2. OpenCV在Zedboard上的移植

    OpenCV编译 本文的前提是zynq交叉编译环境设置 下载opencv3.1.0源码,并解压 wget https://github.com/Itseez/opencv/archive/3.1.0. ...

  3. mysql 入门 1

    连接mysql服务器 mysql -h localhost -u username -ppasswd 1.查看服务器存在的库 show databases; 2.创建数据库 create databa ...

  4. C#控件刷新

    ; ; foreach (string gen in fn_gen) { //MessageBox.Show(gen); Bitmap Bi = new Bitmap(gen); //使用打开的图片路 ...

  5. Flutter实战视频-移动电商-17.首页_楼层组件的编写技巧

    17.首页_楼层组件的编写技巧 博客地址: https://jspang.com/post/FlutterShop.html#toc-b50 楼层的效果: 标题 stlessW快速生成: 接收一个St ...

  6. ubuntu16.04安装php5

    系统源自带是7.0的, 如果要安装安装5.5+或者有5.5+的源可以执行这些命令 sudo apt-get install python-software-propertiessudo apt-get ...

  7. JsonCpp——json文件的解析

    定义: 官网: http://json.org/ 在线解析器:http://json.cn/ http://www.bejson.com/ JSON(JavaScript Object Notatio ...

  8. 福建工程学院第十四届ACM程序设计大赛 - E - 外传:小晋逃生记

    http://www.fjutacm.com/Contest.jsp?cid=705#P4 其实想清楚了就很简单,之前想了很多种方法,以为是二分什么的,看起来就像是一个单峰函数.但是发现直接暴力一波就 ...

  9. Lightoj1012【DFS】

    题意: 输出和' @ '相连有多少个' . '包括' @ ',' # '代表墙不能走: 思路: 基础DFS,找到起点,然后跑一下DFS就好了: #include<cstdio> #incl ...

  10. [Xcode 实际操作]九、实用进阶-(26)对Storyboard(故事版)中的文字标签(Label)进行本地化处理

    目录:[Swift]Xcode实际操作 对Storyboard(故事版)中的文字标签(Label)进行本地化处理. 点击项目名称[DemoApp]进入项目信息面板. [Build Setting]-& ...