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() ...
随机推荐
- JQ实现accordion(可折叠)效果
先看效果--这个就是手风琴的效果: 原理:首先默认section1下面的dd可见,其他的全部隐藏:当点击某个obj时候, 快速隐藏全部的dd,然后只有obj.NEXT().show ...
- iOS ASIHTTPRequest 请求https
iOS 终端请求服务端数据时,为了保证数据安全,我们一般会使用https协议加密,而对于iOS的网络编程,我们一般会使用开源框架:ASIHTTPRequest,但是如果使用传统的http方式,即使忽略 ...
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- web前端学习网址
最近一次电脑崩溃,重装系统所有在浏览器的网址,烟霄云散了…… 手册网址: http://www.shouce.ren/api/index demo学习网址: http://www.w3cplus.co ...
- js的运算
1.表达式 表达式是EMCAscript中的一个“短语”,解释器会通过计算把它转换成一个值.最简单的表达式是字面量或者变量名. 2.前置递增(++box)和后置递增(box++)的区别 看下面一段代码 ...
- hibernate一对多注解
package net.zmcheng.model; import java.util.HashSet;import java.util.Set; import javax.persistence.C ...
- Linux Native Aio 异步AIO的研究
Linux Native Aio 异步AIO的研究 http://rango.swoole.com/archives/282 首先声明一下epoll+nonblock从宏观角度可以叫做全异步,但从微观 ...
- [BS-21] 关于OC中对象与指针的思考
关于OC中对象与指针的思考 1. 创建对象: OC中可通过代码Person *p = [[Person alloc] init];创建了一个对象p.该过程中内存情况为: 在当前线程的栈(默认1M)中, ...
- 利用NSUserdefaults来存储自定义的NSObject类及自定义类数组
利用NSUserdefaults来存储自定义的NSObject类及自定义类数组 1.利用NSUserdefaults来存储自定义的NSObject类 利用NSUserdefaults也可以来存储及获取 ...
- system执行shell命令
system - execute a shell command #include <stdlib.h> int system (const char *command); 描述 syst ...