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初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...
随机推荐
- SQL SERVER 2005修改数据库名称,包括物理文件名和逻辑名称
SQL SERVER 2005修改数据库名称,包括物理文件名和逻辑名称 原来数据库名称为 aa,物理文件名称为 aa.mdf 和 aa_log.ldf: 需要修改数据库名称为 bb,物理文件名 ...
- 北京电子科技学院（BESTI）实验报告5
北京电子科技学院(BESTI)实验报告5 课程: 信息安全系统设计基础 班级:1452.1453 姓名:(按贡献大小排名) 郑凯杰.周恩德 学号:(按贡献大小排名) 20145314.20145217 ...
- 解决Ubuntu安装openssh-server依赖问题
sudo apt-get install openssh-server 提示:openssh-server : 依赖: openssh-client (= 1:6.6p1-2ubuntu1) 解决 u ...
- SOAPUI使用教程-REST功能测试
当创造了SoapUI功能测试用例,常见的情况是,你调用一些REST资源和验证其响应检查返回正确的结果.这可以容易地实现: 添加一个REST请求到新的test step或现有的TestCase 添加断言 ...
- 从零开始山寨Caffe·拾：IO系统(三)
数据变形 IO(二)中,我们已经将原始数据缓冲至Datum,Datum又存入了生产者缓冲区,不过,这离消费,还早得很呢. 在消费(使用)之前,最重要的一步,就是数据变形. ImageNet Image ...
- vim 插件之 gist.vim 的安装
用 IntelliJ 的时觉得 create gist 很好用,查了下,发现 vim 下也有这个插件,于是马上配置上. 安装 下载 Gist.vim 解压后进入目录,拷贝文件 cp plugin/gi ...
- jmobile学习之路 ----设备检测
用一个库,device.js.这是一种最简单的方法.device.js库,不依赖jQuery框架. <!doctype html> <html lang="en" ...
- A library of generic data structures
A library of generic data structures including a list, array, hashtable, deque etc.. https://github. ...
- Google Play Store —与google服务器通信时出现问题
机子:MX4 前几天刷完机后出现登录Google Play Store “与google服务器通信时出现问题”,今天试了好几种方法,来总结一下 1.修改最新Hosts文件 2.SmartHosts ...
- 微信第三方平台定时接收component_verify_ticket
背景: 获取第三方平台令牌(component_access_token),增加了component_verify_ticket参数.component_verify_ticket由公众平台每隔10分 ...