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初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...
随机推荐
- Blend打不开wpf项目，提示无法识别的工具版本“12.0”
讲项目文件用记事本打开然后修改为“14.0”即可
- Linux内核笔记——内存管理之slab分配器
内核版本:linux-2.6.11 内存区和内存对象 伙伴系统是linux用于满足对不同大小块内存分配和释放请求的解决方案,它为slab分配器提供页框分配请求的实现. 如果我们需要请求具有连续物理地址 ...
- html设置透明度
在html中,设置元素的透明度 在css相应元素中添加下面两行代码即可. filter:alpha(opacity=50); /*仅在ie中支持*/ opacity:0.5; /*不支持ie*/ op ...
- java的poi技术写Excel的Sheet
在这之前写过关于java读,写Excel的blog如下: Excel转Html java的poi技术读,写Excel[2003-2007,2010] java的poi技术读取Excel[2003-20 ...
- 关于CSS3的小知识点之2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形 ...
- Java序列化、反序列化和单例模式
学习JAVA的时候,特别是涉及到网络编程时,我们时常让我们的实体类实现一个接口 public class Entity implements Serializable{ } 这样子我们可以通过输入输出 ...
- druid sql黑名单 报异常 sql injection violation, part alway true condition not allow
最近使用druid,发现阿里这个连接池 真的很好用,可以监控到连接池活跃连接数 开辟到多少个连接数 关闭了多少个,对于我在项目中查看错误 问题,很有帮助, 但是最近发现里面 有条sql语句 被拦截了, ...
- sphinx搜索实例
多个关键词搜索一个字段的几种方式测试 @proname "ygm" "磨粉机" "2" //搜索结果proname字段必须同时包含3个词,有 ...
- 深入理解Spark(一)：Spark核心概念RDD
RDD全称叫做弹性分布式数据集(Resilient Distributed Datasets),它是一种分布式的内存抽象,表示一个只读的记录分区的集合,它只能通过其他RDD转换而创建,为此,RDD支持 ...
- 简单说说.Net中的弱引用
弱引用是什么? 要搞清楚什么是弱引用,我们需要先知道强引用是什么.强引用并不是什么深奥的概念,其实我们平时所使用的.Net引用就是强引用.例如: Cat kitty = new Cat(); 变量ki ...