react UI交互 简单实例
<body>
<!-- React 真实 DOM 将会插入到这里 -->
<div id="example"></div>
<!-- 引入 React -->
<script src="src/libs/react.js"></script>
<!-- 引入 JSX 语法格式转换器 -->
<script src="src/libs/JSXTransformer.js"></script>
<script src="src/libs/jquery.js"></script>
<!-- 注意：script 需要注明 type 为 text/jsx 以指定这是一个 JSX 语法格式 -->
<script type="text/jsx">
var StateComponent = React.createClass({
getInitialState: function () {
return {list: ['xxx', 'yyy']};
},
handleClick: function () {
this.setState({list: [1, 2, 3]});
},
render: function () {
return (
<div>
<button onClick={this.handleClick}>click</button>
<RenderComponent data-list={this.state.list}/>
</div>
)
}
});
var RenderComponent = React.createClass({
render: function () {
return (
<ul>
{
this.props['data-list'].map(function (item) {
return (<li>{item}</li>)
})
}
</ul>
)
}
});
React.render(
<StateComponent />,
document.body
);
</script>
</body>
点击前
点击后
总结：
state是同UI交互最重要的属性
getInitialState是用来初始化state，自定义handleClick是用来处理我们点击事件的。
React实现了自己的一套事件代理和处理机制，这套机制是符合W3C标准的，React有两个很重要的特点：
自动绑定
所有的事件处理函数当中的this指向组件的实例。如果想要拿到当前操作的DOM，通过参数event获取。
事件代理
React并没有将事件处理添加到相应的每个节点上。当React启动时，在根节点上监听所有的事件，并管理事件到相应节点的映射。当组件mounted或者unmounted时，事件将会被添加到映射关系或者被删除。我感觉，有点jQuery的事件代理的意思：
#糟糕的写法
$('li').on('click', function () {
//todo
});
//好点的写法
$('ul').on('click', 'li', function () {
//todo
});
状态机
React将UI简单的看作状态机。看UI看作各种各样的状态，并在各种状态间切换，很容易保持UI的一致性。在React中，你只要改变组件的状态，就会重新渲染UI，React会在最有效的方式下更新DOM。
state工作原理
通过调用setState(data, callback)方法，改变状态，就会触发React更新UI。大部分情况下，我们不需要提供callback函数。React会自动的帮我们更新UI。
react UI交互 简单实例的更多相关文章
- 微信小程序初探【类微信UI聊天简单实现】
微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...
- Docz 用 MDX 写 React UI 组件文档
Docz 用 MDX 写 React UI 组件文档 前言 为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作.提高可复用,所以现在越来越多团队开始创建自己的 UI 组 ...
- WeX5的简单介绍及UI的简单讲解
WeX5的简单介绍及UI的简单讲解 (2016-01-13 14:49:05) 标签: it 分类: WeX5的初步自学 一.WeX5的简单讲解 1.WeX5是前端快速开发框架,可开发跨端运行应用.是 ...
- firefox 扩展开发笔记（三）:高级ui交互编程
firefox 扩展开发笔记(三):高级ui交互编程 前言 前两篇链接 1:firefox 扩展开发笔记(一):jpm 使用实践以及调试 2:firefox 扩展开发笔记(二):进阶开发之移动设备模拟 ...
- ajax原理总结附简单实例及其优点
在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 近有闲情,将之总结如下: [名称] Ajax是Asynchronous Jav ...
- gtk+blade+anjuta 的简单实例
gtk+blade+anjuta 的简单实例我的系统 ubuntu 12.04 1> 选择源 不正确会有很多问题,速度慢,找不到安装的软件.163的源就不错 http://mirrors. ...
- SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 异常汇总:http://www ...
- 【附案例】UI交互设计不会做？设计大神带你开启动效灵感之路
随着网络技术的创新发展,如今UI交互设计应用越来越广泛,显然已经成为设计的主流及流行的必然趋势.UI界面交互设计中的动效包括移动,滑块,悬停效果,GIF动画等.UI界面交互设计为何越来越受到青睐?它有 ...
- 初学者的React全家桶完整实例
概述 该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系.我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...
随机推荐
- 机器学习之K-近邻算法
机器学习可分为监督学习和无监督学习.有监督学习就是有具体的分类信息,比如用来判定输入的是输入[a,b,c]中的一类:无监督学习就是不清楚最后的分类情况,也不会给目标值. K-近邻算法属于一种监督学习分 ...
- < meta > 元素
< meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...
- JS定义数组，初始化
定义一维数组 方法1: var _TheArray = new Array);/定义 _TheArray[0]="1"; _TheArray[1]="2"; _ ...
- webpack 使用教程--实时刷新测试
学习webpack,基本始终是围绕: 1.如何安装webpack 2.如何使用webpack 3.如何使用loader 4.如何使用开发服务器 可能我们会在如何使用开发服务器的时候,遇到诸如调试的相关 ...
- [NOIP2013]华容道
1.题面 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间.小 B 玩的华容道与经典 ...
- 使用系统自带的GCD的timer倒计时模板语句遇到的小坑。。
今天折腾了下系统gcd的 但是如果不调用这句dispatch_source_cancel()那么这个timer根本不工作....解决方法如下: 实现一个倒计时用自带的gcd如此简洁.. 原因可能是如果 ...
- HDU 2689 Sort it (树状数组)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2689 Sort it Problem Description You want to processe ...
- 可变数组NSMutableArray
//创建一个空的可变数组 NSMutableArray *array = [NSMutableArray array]; //向数组里面添加对象 [array addObject:@"< ...
- 字符串、数组方法实战--charAt()，split(),indexOf(),substring()
这篇随笔根据两个面试题来实战一下数组.字符串的一些方法. 题一:一个字符串中找出出现次数最多的字符次数 var str = 'fuuhuhuhufaihuhfnkjNKCNIO'; function ...
- 深入理解OAuth2.0协议
1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...