文档章节

React的一个简单示例

祁达方
 祁达方
发布于 2015/11/25 12:18
字数 367
阅读 64
收藏 0

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

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

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

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

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

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

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

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

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


© 著作权归作者所有

共有 人打赏支持
祁达方
粉丝 11
博文 41
码字总数 51226
作品 0
大兴
程序员
私信 提问
推荐 11 款 React Native 开源移动 UI 组件

本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助。 React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境...

oschina
2015/04/04
91.9K
15
Next.js 4.1.1 发布,添加 styled-jsx-plugin-sass 示例

Next.js 4.1.1 已发布,Next.js 是一个用于在服务端渲染 React 应用程序的简单框架。 补丁: 添加 styled-jsx-plugin-sass 示例: #3104 React-hot-loader 和警告: #3110 使用 strict-hot-loa...

周其
2017/10/20
705
0
iOS原生混合RN开发最佳实践

做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid,在早期的时候,可能部分同学也接...

光强
2018/05/16
0
0
Formik官方应用案例解析(四)组件生命周期事件

基础 示例工程:formik-09x-component-lifecycle-events-example 核心文件:index.js 示例说明 Formik大部分示例工程中都使用了极其方式创建Formik表单组件,本示例中则使用了复杂(或者说典...

googlingman
2018/08/04
0
0
日了狗!Redux最简单的入门介绍

日了狗了,狗日的react+redux的水太深了。 哥哥我已经连续研究了很近了,看了那些狗日的写的redux简单示例。妈蛋的,没一个写的好的。看了半天云里雾里,狗日的不知道提供一个最简单的打包下...

supperman
2016/09/14
19
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux Wireshark普通用户启动使用方案

当系统安装好Wireshark后请正常启动是否可以进行正常使用,如果不行请参考下列指导 向系统添加一个用户组 sudo groupadd wireshark //如提示此组存在可跳过 将指定用户添加到这个组中 sudo...

CHONGCHEN
今天
2
0
CSS 选择器参考手册

CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。...

Jack088
今天
2
0
数据库篇一

数据库篇 第1章 数据库介绍 1.1 数据库概述  什么是数据库(DB:DataBase) 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据...

stars永恒
今天
4
0
Intellij IDEA中设置了jsp页面,但是在访问页面时却提示404

在Intellij IDEA中设置了spring boot的jsp页面,但是在访问时,却出现404,Not Found,经过查找资料后解决,步骤如下: 在Run/Debug Configurations面板中设置该程序的Working Directory选项...

uknow8692
昨天
4
0
day24:文档第五行增内容|每月1号压缩/etc/目录|过滤文本重复次数多的10个单词|人员分组|

1、在文本文档1.txt里第五行下面增加如下内容;两个方法; # This is a test file.# Test insert line into this file. 分析:给文档后增加内容,可以用sed 来搞定;也可以用while do done...

芬野de博客
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部