首发:个人博客,更新&纠错&回复

React的核心是定义组件类,组件有三个要素:状态、行为、界面。

1.渲染状态到界面:状态由组件对象的state属性持有,从状态到界面的渲染工作由组件类的render方法完成,该方法应该使用state属性,该方法的返回值是html片段,即渲染的结果。

2.界面上响应操作:界面渲染出的html组件当然可以编写触发函数,该函数应该改变组件对象的state属性,并调用组件对象的setState方法,该方法的调用将自动触发重新绘制的工作,调用render方法,将组件对象状态的变化反映到界面上。

一个最简单的demo地址在这里,可以右键源码,写了点简单的注释。

在这个例子中,你看到的整个表格是一个组件,该表格的状态由一个js对象记录,当点击单元格的时候,改变状态,并重新绘制组件。

这demo的业务场景……就是过年和小伙伴协调dota比赛时间,记录每个人都哪天有空。

下一步任务就是在node服务器上,将状态记录到mongoDB。

长期欢迎项目合作机会介绍,项目收入10%用于酬谢介绍人。新浪微博:@冷镜,QQ:908789432

React的一个简单示例的更多相关文章

  1. web 框架的本质及自定义web框架 模板渲染jinja2 mvc 和 mtv框架 Django框架的下载安装 基于Django实现的一个简单示例

    Django基础一之web框架的本质 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于Django实现的一个简单 ...

  2. asp.net WebService的一个简单示例

    不同的系统之间经常会需要数据的交换对接,而Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范 ...

  3. Django的下载安装以及实现一个简单示例

    一.Django下载安装 Django下载链接 1. 下载Django: pip3 install django==1.11.9    (大的版本1.11不要错) 2.创建一个django proje ...

  4. mvp(2)一个简单示例,加深理解

    参考: http://www.cnblogs.com/liuling/p/mvp-pattern-android.html 架构图: 1.View层 public interface NewsView ...

  5. 基于boost的bind与function的一个简单示例消息处理框架

    前两年开始接触boost,boost库真是博大精深:今天简单介绍一下boost中之前用到的的bind与function,感觉挺实用的,分享给大家,我对boost用的也不多,让大家见笑了. 上次文发了一 ...

  6. 【转】IEnumerable接口的一个简单示例

    转:https://blog.csdn.net/wang371756299/article/details/8197075 摘要: IEnumerable接口是实现foreach循环的一个重要的接口, ...

  7. 接口测试之基于LoadRunner的一个简单示例

    这几天一直在捣鼓接口测试,以下总结一下: 1.什么是接口测试:接口是指系统模块与模块之间或者系统与系统之间进行交互,一般我们用的多的是HTTP协议的接口.WebService协议的接口.还有RPC(R ...

  8. .Net Attribute详解(上)-Attribute本质以及一个简单示例

    Attribute的直接翻译是属性,这和Property容易产生混淆,所以一般翻译成特性加以区分.Attribute常常的表现形式就是[AttributeName], 随意地添加在class, met ...

  9. Inside The C++ Object Model - 04 C++对象模型的一个简单示例

    首先定义一个类X class X { public: X(); X(const X& x); virtual ~X(); virtual foo(); } 再来一段代码: X foobar() ...

随机推荐

  1. Selenium2学习-012-WebUI自动化实战实例-010-解决元素失效:StaleElementReferenceException: stale element reference: element is not attached to the page document

    元素失效的想象提示信息如下图所示,此种问题通常是因为元素页面刷新之后,为重新获取元素导致的. 解决此类问题比较简单,只需要在页面刷新之后,重新获取一下元素,就可以消除此种错误了. 以下以易迅网搜索为例 ...

  2. 生成uid的算法

    private function _getUid() { //2013-01-01 00:00:00 (timestamp-microtime) $startTime= 1356969600000; ...

  3. 获取dom元素的宽度和高度

    一.获取css的大小 1.第一种通过内联样式 var box = document.getElementById('box'); var w = box.style.width; var h = bo ...

  4. (转)Eclipse New Server 【无法输入server name】

    I was trying to add Tomcat 7 in my Eclipse in Ubuntu. When I click “Add new server” in Eclipse and s ...

  5. 微信支付开发(12) 认清微信支付v2和v3

    微信支付现在分为v2版和v3版 2014年9月10号之前申请的为v2版,之后申请的为v3版. V2版中的参数有AppIDAppSecret支付专用签名串PaySignKey商户号PartnerID初始 ...

  6. android mContainer.setPersistentDrawingCache (int drawingCacheToKeep)

    mContainer.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE); persistentDrawingCache设置 ...

  7. I2C实时时钟rx-8025板卡实际应用

    rx-8025是片外I2C实时时钟,其应用于9260板卡方法如下.总体思想是配置内核添加驱动(I2C驱动,内核已提供的很完备),板级文件添加设备,添加设备文件以应用程序操作. 1. 配置内核 1)I2 ...

  8. hadoop map reduce 实例wordcount的使用

    hadoop jar hadoop-mapreduce-examples-2.7.3.jar wordcount /wordcount.txt /wc/output3

  9. PostgreSQL Replication之第十一章 使用Skytools(2)

    11.2 剖析 skytools Skytools 不只是一个单一的脚本,而是一个提供各种不同服务的工具的集合.一旦我们安装了Skytools,更详细地查一下这些组件的细节是有意义的: • londi ...

  10. javabean实体类对象转为Map类型对象的方法(转发)

    //将javabean实体类转为map类型,然后返回一个map类型的值 public static Map<String, Object> beanToMap(Object obj) { ...