文档章节

React的一个简单示例

祁达方
 祁达方
发布于 2015/11/25 12:18
字数 367
阅读 63
收藏 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
86.1K
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
438
0
Formik官方应用案例解析(四)组件生命周期事件

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

googlingman
08/04
0
0
iOS原生混合RN开发最佳实践

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

光强
05/16
0
0
React 中常见的动画实现方式

现在,用户对于前端页面的要求已经不能满足于实现功能,更要有颜值,有趣味。除了整体 UI 的美观,在合适的地方添加合适的动画效果往往比静态页面更具有表现力,达到更自然的效果。比如,一个...

sinat_17775997
01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Cointext在阿根廷和土耳其推出比特币现金短信钱包

Cointext于10月15日开始在土耳其和阿根廷提供新的基于SMS的比特币现金钱包服务,这两个国家的加密货币使用量急剧上升,以应对严峻的经济形势。 移动钱包 通过短信处理BCH交易 “比特币是更好...

lpy411
15分钟前
0
0
大数据早课-0918

9.18日早课 1.全局搜索含有abc的文件名称或文件夹的命令 2.当前目录一般用什么表示 3.切换到上一次和上一层命令分别是什么 4.pwd是查看当前目录的什么 5.隐藏文件或文件夹的标识是什么? 怎样...

hnairdb
15分钟前
0
0
mybatis学习笔记一

一、mybaits需要的项目依赖 <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --> <dependency> <groupId>org.mybatis</groupId> <artif......

wuyiyi
16分钟前
0
0
CentOS6 安装 GraphicsMagick

1.安装相关依赖: yum install -y gcc libpng libjpeg libpng-devel libjpeg-devel ghostscript libtiff libtiff-devel freetype freetype-devel 2.下载并解压到目录/usr/local/ wget ft......

凯文加内特
18分钟前
0
0
RabbitMq集群使用Nginx做负载均衡

1.配置rabbitmq集群(可以参考前一篇RabbitMq之部署集群) 2.Nginx做负载均衡 注意:Nginx1.90版本后 新增了stream 模块用于一般的 TCP 代理和负载均衡,之前版本不支持 修改Nginx配置文件ngi...

zhaochaochao
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部