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

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. JS事件分析

    1.注册事件 1.1 使用HTML元素的事件属性 <div id='myDiv' style="width:100px;height:100px;background-color:re ...

  2. calc 的使用

    通常情况下,一个元素节点使用固定定位absolute和固定定位fixed,会遇到一个问题,如果设置100% ,此时你在对他设置padding,border,margin,它就会撑满 具体情况如下图:

  3. asm/aam links

    http://personalpages.manchester.ac.uk/staff/timothy.f.cootes/asm_links.html

  4. 读取、写入excel数据

    在实际项目中,不可避免的会操作excel表格.一直以来都是读取excel表格,可今天为了写入excel表格,可是煞费苦心,终于完成,记录下来以便后续使用. 1.读取excel表格的数据 读取excel ...

  5. WebDriver中启动不同的浏览器

    import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.firefox.FirefoxDriver; im ...

  6. linux修改hostname

    1.如果只是修改hostname可以通过如下命令 hostname newHostname 注意:这种修改方式只有当前有效,等服务器重启后hostname就会失效,回到原来的hostname. 2.如 ...

  7. javaEE开发案例——购物车

    一.页面 流程:登录页面(login.jsp)——>购物大厅页面(hall.jsp)——>购物车页面(showMyCart.jsp)——>订单页面(myorder.jsp)——> ...

  8. Perl Print Win32 Console Windows 控制台 print Unicode 问题

    参考资料: https://stackoverflow.com/questions/15224400/perl-on-windows-problems-with-encoding https://te ...

  9. python password输入

    1.linux下用getpass,没有星号提示,符合linux风格 from getpass import getpasspwd = getpass('Enter the password: ') 2 ...

  10. 11G中自动收集统计信息

    在11G中,引入了一个名为 gather_stats_prog 的自动运行任务专用于自动收集统计信息.其对应的客户端名称为"auto optimizer stats collection&q ...