React的一个简单示例
React的核心是定义组件类,组件有三个要素:状态、行为、界面。
1.渲染状态到界面:状态由组件对象的state属性持有,从状态到界面的渲染工作由组件类的render方法完成,该方法应该使用state属性,该方法的返回值是html片段,即渲染的结果。
2.界面上响应操作:界面渲染出的html组件当然可以编写触发函数,该函数应该改变组件对象的state属性,并调用组件对象的setState方法,该方法的调用将自动触发重新绘制的工作,调用render方法,将组件对象状态的变化反映到界面上。
一个最简单的demo地址在这里,可以右键源码,写了点简单的注释。
在这个例子中,你看到的整个表格是一个组件,该表格的状态由一个js对象记录,当点击单元格的时候,改变状态,并重新绘制组件。
这demo的业务场景……就是过年和小伙伴协调dota比赛时间,记录每个人都哪天有空。
下一步任务就是在node服务器上,将状态记录到mongoDB。
React的一个简单示例的更多相关文章
- web 框架的本质及自定义web框架 模板渲染jinja2 mvc 和 mtv框架 Django框架的下载安装 基于Django实现的一个简单示例
Django基础一之web框架的本质 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于Django实现的一个简单 ...
- asp.net WebService的一个简单示例
不同的系统之间经常会需要数据的交换对接,而Web Service技术, 能使得运行在不同机器上的不同应用无须借助附加的.专门的第三方软件或硬件, 就可相互交换数据或集成.依据Web Service规范 ...
- Django的下载安装以及实现一个简单示例
一.Django下载安装 Django下载链接 1. 下载Django: pip3 install django==1.11.9 (大的版本1.11不要错) 2.创建一个django proje ...
- mvp(2)一个简单示例,加深理解
参考: http://www.cnblogs.com/liuling/p/mvp-pattern-android.html 架构图: 1.View层 public interface NewsView ...
- 基于boost的bind与function的一个简单示例消息处理框架
前两年开始接触boost,boost库真是博大精深:今天简单介绍一下boost中之前用到的的bind与function,感觉挺实用的,分享给大家,我对boost用的也不多,让大家见笑了. 上次文发了一 ...
- 【转】IEnumerable接口的一个简单示例
转:https://blog.csdn.net/wang371756299/article/details/8197075 摘要: IEnumerable接口是实现foreach循环的一个重要的接口, ...
- 接口测试之基于LoadRunner的一个简单示例
这几天一直在捣鼓接口测试,以下总结一下: 1.什么是接口测试:接口是指系统模块与模块之间或者系统与系统之间进行交互,一般我们用的多的是HTTP协议的接口.WebService协议的接口.还有RPC(R ...
- .Net Attribute详解(上)-Attribute本质以及一个简单示例
Attribute的直接翻译是属性,这和Property容易产生混淆,所以一般翻译成特性加以区分.Attribute常常的表现形式就是[AttributeName], 随意地添加在class, met ...
- Inside The C++ Object Model - 04 C++对象模型的一个简单示例
首先定义一个类X class X { public: X(); X(const X& x); virtual ~X(); virtual foo(); } 再来一段代码: X foobar() ...
随机推荐
- 《Maven实战》阅读笔记
java -versionmvn -vmvn help:system m2eclipse maven->install MAVEN_OPTS: -Xms128m -Xmx512mmvn clea ...
- JS手册目录
1.控件篇1.1 文本框 1.2 文本域 1.3 单选按钮 1.4 复选按钮 1.5 下拉列表框 1.6 文件上传组件 1.7 提交按钮 版权所有,转载请注明作者出处. 2016年7月26日15:54 ...
- Session服务器配置指南与使用经验
一.摘要 所有Web程序都会使用Session保存数据. 使用独立的Session服务器可以解决负载均衡场景中的Session共享问题.本文介绍.NET平台下建立Session服务器的几种办法, 并介 ...
- 如何查看Servlet、JSP的版本(Tomcat V7.0.70)
1. 简要说明:Tomcat6.0 所支持的是Servlet2.5,Tomcat 7.0 所支持的Servlet3.0,Servlet2.5 和Servlet3.0的差异较大,对于Servlet3.0 ...
- .net中如何使用cookie
比如建立一个名为aspcn,值为灌水小鱼的cookie HttpCookie cookie = new HttpCookie["aspcn"];cookie.Value = &qu ...
- 获取微信服务器IP地址
关键字:微信公众平台 微信服务器 IP地址 如果公众号基于安全等考虑,需要获知微信服务器的IP地址列表,以便进行相关限制,可以通过该接口获得微信服务器IP地址列表. 接口调用请求说明 http请求方式 ...
- Android HttpClient基本使用方法
GET 方式 //先将参数放入List,再对参数进行URL编码 List<BasicNameValuePair> params = new LinkedList<BasicNameV ...
- javascript_获取iframe框架中元素节点的属性值
1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...
- The L1 Median (Weber 1909)
The L1 Median (Weber 1909) 链接网址 Derived from a transportation cost minimization problem, the L1 medi ...
- javaScript中的数据类型
一.综述 javaScript中的数据类型分为两类: 简单类型:Boolean,Number,String 引用类型:Object 其他:undefined代表变量没有初始化,null代表引用类型为空 ...