React的一个简单示例

首发：个人博客，更新&纠错&回复

React的核心是定义组件类，组件有三个要素：状态、行为、界面。

1.渲染状态到界面：状态由组件对象的state属性持有，从状态到界面的渲染工作由组件类的render方法完成，该方法应该使用state属性，该方法的返回值是html片段，即渲染的结果。

2.界面上响应操作：界面渲染出的html组件当然可以编写触发函数，该函数应该改变组件对象的state属性，并调用组件对象的setState方法，该方法的调用将自动触发重新绘制的工作，调用render方法，将组件对象状态的变化反映到界面上。

一个最简单的demo地址在这里，可以右键源码，写了点简单的注释。

在这个例子中，你看到的整个表格是一个组件，该表格的状态由一个js对象记录，当点击单元格的时候，改变状态，并重新绘制组件。

frameborder="1" height="200" name="react简单示例" scrolling="no" src="http://page.zidafone.com/demos/react-demo.html" title="react简单示例" width="400" style="box-sizing: border-box;">

这demo的业务场景……就是过年和小伙伴协调dota比赛时间，记录每个人都哪天有空。

下一步任务就是在node服务器上，将状态记录到mongoDB。

长期欢迎项目合作机会介绍，项目收入10%用于酬谢介绍人。新浪微博： @冷镜，QQ： 908789432。