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

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. 学习GitHub

    学习GitHub: GitHub教程:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b00 ...

  2. Web service是什么?

    原文:http://www.ruanyifeng.com/blog/2009/08/what_is_web_service.html 我认为,下一代互联网软件将建立在Web service(也就是&q ...

  3. JavaScript:JavaScript事件的处理

    JavaScript事件处理 —————事件的处理流程: —————动态事件绑定: —————常用的事件处理. 1.事件的概念 在页面之中,会针对用户的每一个操作进行记录.在页面中的事件可以简单的理解 ...

  4. Android 多线程处理之多线程用法

    handler.post(r)其实这样并不会新起线程,只是执行的runnable里的run()方法,却没有执行start()方法,所以runnable走的还是UI线程. 1.如果像这样,是可以操作ui ...

  5. 怎样搭建本地svn服务器环境-轻松掌握版本管理

    版本管理一直是程序员使用频率比较高的一个工具软件.不管你是自己使用还是提供给别人使用,svn服务器的架设是一个入门功课.今天我们先来介绍一下怎么样在本地搭建svn服务器.这种应用一般是网络不是很好,提 ...

  6. iOS 瀑布流的Demo

    /** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...

  7. Hive -- 基于Hadoop的数据仓库分析工具

    Hive是一个基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,通过类SQL语句快速实现简单的MapReduce统计,不必开发专门的MapReduce应用,十分适合数据仓库 ...

  8. Java基础之一组有用的类——使用正则表达式搜索子字符串(TryRegex)

    控制台程序. 正则表达式只是一个字符串,描述了在其他字符串中搜索匹配的模式.但这不是被动地进行字符序列匹配,正则表达式其实是一个微型程序,用于一种特殊的计算机——状态机.状态机并不是真正的机器,而是软 ...

  9. 试用windows Azure

    试用windows Azure, 需要国外手机注册,信用卡注册. windows操作系统,只有2008R2,2012,2012R2可以选择,我选择XS最低档,然后选2012R2,欧洲数据中心,那个慢啊 ...

  10. 研究实验1_搭建一个精简的C语言开发环境(包含部分经典的前言)

    综合研究:      在这部分内容中,将启示我们如何进行独立研究和深度思考(一定要注意这一点,相应的调整自己的学习思想).同时使我们:          (1)认识到汇编语言对于深入理解其他领域知识的 ...