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() ...
随机推荐
- block 反向传值回调
/** * block 反向传值回调 */ //在第二个控制器中 // (1)声明block,在基类中已写好 // (2)写好传值方法 //(1) typedef void (^Return ...
- git 项目初始化
1.在git服务器界面右上角“+” .create new project ,写上项目名字生成一个新的组 2.如果机器第一次与git 建立连接,需要让机器生成一个id_rsa和id_rsa.pub ...
- mybatis的xlm的sql
<sqlMap namespace="egis.scms.order"> <typeAlias alias="ScmsOrderDTO" ...
- nohup和&的区别
nohup和&的区别http://bbs.chinaunix.net/forum.php?mod=viewthread&tid=4241330&fromuid=21288388 ...
- PHP中用下划线开头的变量含义
http://blog.csdn.net/zlking02/article/details/6752256 一个下划线是私有变量以及私有方法两个下划线是PHP内置变量. https://segment ...
- Ionic学习笔记四 一些问题处理
版权声明:本文为博主原创文章,转载请留链接,非常感谢. 目录(?)[+] IONIC actionsheet 的cancel menu在android下不显示的bug 在 _action-sh ...
- windows系统下利用MySql命令行进入MySql数据库
Enter password: ****
- OC中@property属性关键字的使用(assign/weak/strong/copy)
OC中@property属性关键字的使用(assign/weak/strong/copy) 一.assign 用于 ‘基本数据类型’.‘枚举’.‘结构体’ 等非OC对象类型 eg:int.bool等 ...
- AutoMappeer自动映射
AutoMapper是用来解决对象之间映射转换的类库.对于我们开发人员来说,写对象之间互相转换的代码是一件极其浪费生命的事情,AutoMapper能够帮助我们节省不少时间.
- svn更新项目时遇到被锁住的问题
来自:http://blog.csdn.net/woshixuye/article/details/7776742 遇到问题 我们用svn更新某个项目的时候,有时候会遇到一些什么文件夹被locked等 ...