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

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. shell 统计GMT0 时区的数据

    和某个供应商核对数据,对方是GMT+0时区,我方报表默认北京时间,无法修改为GMT0, 对excel中按照小时级别的数据导出到excel处理,然后转为文本文件,shell转为GMT0进行统计: 前期处 ...

  2. C#中jQuery Ajax实例(一)

    目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台 下面是我的Ajax异步传值的第一个实例 1.前台html代码: <html xmlns="http://www. ...

  3. SQL Server 2012 新的分页函数 OFFSET & FETCH NEXT

    DECLARE @page INT, @size INT;select @page = 300, @size = 10 SELECT *FROM gpcomp1.GPCUSTWHERE company ...

  4. 如何在APICloud平台使用腾讯X5引擎

    目前APICloud与腾讯X5引擎已经达成全方位的深度合作,APICloud在多个产品线深度集成X5引擎,广大APICloud开发者们即日起可通过以下几方面在你的APP中使用X5引擎,享受X5引擎带来 ...

  5. webconfig和appconfig中出现特殊字符如何处理

    在配置文件出现特殊字符&的字符串(如:abce&efg),就会报错.错误如下: 如何处理呢? config文件的本质是xml,所以必须符合xml的规范我们需要这么处理: abce&am ...

  6. Android Studio IDE 主题设置

    1.界面主题设置,如下图: 2.代码字体设置,如下图:

  7. Android --Android Stuido 导入jar包

    参考博客:Android Studio导入第三方类库的方法 1.将第三方开源jar包代码拷入工程文件夹 2.在settings.gradle添加 include ':app' include ':ap ...

  8. 面向对象编程(七)——Static关键字

    Static变量

  9. Windows Server 2008 R2 域控修改域用户密码复杂性

    1.进入”本地安全策略”进行管理时,发现密码策略已经被锁定,无法更改: 2.在此情况下要改密码策略的过程如下, 进入组策略管理: 3.右键点击/编辑Default Domain Policy: 4.在 ...

  10. Java File类基本操作

    我们可以利用Java.io.File类对文件进行操作,基本操作如下: 1)创建文件: public boolean createNewFile() throws IOException 2)删除文件: ...