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

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. 完美解决 .txt文件在Mac上不能打开的问题

  2. 使用Aspose.Cell控件实现多个Excel文件的合并

    之前有写过多篇关于使用Apose.Cell控件制作自定义模板报表和通用的导出Excel表格数据的操作,对这个控件的功能还是比较满意,而且也比较便利.忽然有一天,一个朋友说:你已经有生成基于自定义模板报 ...

  3. ionic一些常见问题及方法(网页链接式)

    ionic 进入二级目录以后隐藏底部导航栏(tabs) http://blog.csdn.net/shenshucong520/article/details/48287811ionic三级目录乃至多 ...

  4. 判断远程图片是否存在【适用于windows服务器】

    <?php function file_exists2($url) { if(@file_get_contents($url,0,null,0,1)) return 1; else return ...

  5. 对memcpy函数的改进

    void *mymemcpy(void *dst,const void *src,size_t num) { assert((dst!=NULL)&&(src!=NULL)); int ...

  6. C3P0的详细配置说明

    C3P0是一个开放源代码的JDBC连接池,它在lib目录中与Hibernate一起发布,包括了实现jdbc3和jdbc2扩展规范说明的Connection 和Statement 池的DataSourc ...

  7. CString + UINT Error:有多个运算符"+="与这些操作数匹配

    在OnChar中,参数UINT nChar 有一个CString str,现在执行 str += nChar报错:Error:有多个运算符"+="与这些操作数匹配 解决办法:把UI ...

  8. Azure 意外重启, 丢失sql server master表和 filezilla

    突然发现今晚网站打不开了,提示连不上数据库. ftp也连不上了. 远程连上Azure 发现机器意外重启, 丢失sql server master表和 filezilla 要重新安装. 又耗费我几个小时 ...

  9. HTML语言的一些元素(一)

    1)标题的六个等级:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>.如果写了诸如:<h7>等,则作为正文 ...

  10. C++Primer 第七章

    //1.定义在类内部的函数是隐式内联的. //2.默认情况下,this指针的类型是指向类类型非常量版本的常量指针.对于类的常量成员函数的声明方法是:将const放置于成员函数的参数列表后,用于修饰th ...