React Native学习笔记
React 是使用ES6 ,支持JSX语法, 开发组件化web或native的工具. 现阶段使用Babel工具转换成ES5 代码.
组件通过props属性传递不变化的内容,UI通过state属性变动来产生变化.
React 一个界面框架, 数据的管理在js中比较麻烦, 容易混乱 . 有个redux库可以管理一个统一的数据存储点. 一个应用只有一个Store对象,内部是一个全局可随处访问的变量.
Redux 的三个概念 :
container, reduce, actions .
1. 创建container, container是一个包含了业务逻辑代码, 负责数据显示过滤和事件绑定的概念. 实际使用connect自动创建.
包括两个方法 mapStateToProps 和mapDispatchToProps. 最后一句代码connect(mapStateToProps,mapDispatchProps)(UIComponent),有两个括号,第一个里就写这两个定义的方法,后面的括号写这些props要在哪个UI组件类中使用.
2. reduce是一个可传递两个参数(state,action) ,返回变化后的state的函数. 核心概念是不直接修改state值,通过Object.assign({},state,{要覆盖的新值属性keyvalue}) 创建新对象返回.
3. actions 是一些functions 表示执行的动作,方法名可以定义为addNews,listNews,delNews这种动词,实际直接返回一个{key:"ADD_NEWS","other":"dfdsfdsf"},除key以外可以定义传递给事件处理需要的参数.
4.怎么触发action?
通过全局方法dispatch(action,自定义参数)触发.
5.组件中的事件最好写成closure的形式,其他形式可能会无法找到方法之类的,原理就是此this不是需要的this导致.
closure 写法:
var clickGetUserInfo = (id)=> {
this.refs.uiEle.text = "23421323"
}
render() {
<View onClick={clickGetUserInfo} ref="uiEle">
}
React Native学习笔记的更多相关文章
- React Native 学习笔记--进阶(二)--动画
React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...
- React Native学习笔记之2
1:如何创建一个react native工程 首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProjec ...
- React Native学习笔记之1
1:运行React Native报连接错误解决 解决方式: 在终端进入项目文件里,然后执行:(cd Pods/React; npm run start) 2:组件生命周期介绍 创建阶段 1. getD ...
- react native 学习笔记
假设你的机器现在还没安装任何环境. 不同的操作系统.不同的目标平台,具体的步骤也会有所不同.如果你想同时开发android和ios也没问题,只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同 本 ...
- React Native学习笔记-1:JSC profiler is not supported.
新建React-Native工程,直接编译运行报错,控制台错误信息如下: 2016-02-22 16:49:47.317 [info][tid:com.facebook.React.JavaScrip ...
- React Native学习笔记-1:JSC profiler is not supported.(转载)
运行react-native中Example下的UIEXPLORER Project 遇到虾面报错: 2016-03-21 14:12:18.941 [trace][tid:com.facebook. ...
- React Native 开发笔记
ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...
- React Native 学习-01
React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
随机推荐
- win7,Mindmanager2012使用模板时弹出Runtime error R6025解决方法
Mindjet.MindManager2012.v10.0在应用个别模板时提示"参数错误",然后自动关闭. 解决办法: 如果是win7系统,可以进入C:\Users\(用户名)\A ...
- 我设计的ASP.NET笔试题,你会多少呢
本笔试题考查范围包括面向对象基础.HTML.CSS.JS.EF.jQuery.SQL.编码思想.算法等范围. 第1题:接口和抽象类有何区别? 第2题:静态方法和实例方法有何区别? 第3题:什么是多态? ...
- Entity Framework 6 Recipes 2nd Edition(12-7)译 -> 设定默认值
12-7. 设定默认值 问题 在把一个实体保存到数据库之前,设置该实体属性的默认值 解决方案 假设你有一个如Figure 12-9所示的表, 它保存采购订单(purchase order). 主键Pu ...
- .Net 面试题 3C(CTS,CLS,CLR)
1.CTS(Common Type System)通用类型系统 CTS不但实现了COM的变量兼容类型,而且还定义了通过用户自定义类型的方式来进行类型扩展.任何以.NET平台作为目标的语言必须建立它的数 ...
- Android点滴
1,View中getWidth(),getLayoutParams.width,getMeasureedWidth()的区别 2,setCompoundDrawables和setCompoundDra ...
- hadoop2.7.1 HA安装部署(转)
hadoop集群规划 目标:创建2个NameNode,做高可用,一个NameNode挂掉,另一个能够启动:一个运行Yarn,3台DataNode,3台Zookeeper集群,做高可用. 在 hadoo ...
- C#/VB.NET Excel数据分列
C#/VB.NET Excel数据分列 有时候我们需要将保存在Excel单元格中的组合型数据拆分为多列(如将全名拆分为姓和名两列)以方便我们处理.记忆或保存.为了避免重复和大量的手动输入工作,Exce ...
- 用CIL写程序:从“call vs callvirt”看方法调用
前文回顾:<用CIL写程序系列> 前言: 最近的时间都奉献给了加班,距离上一篇文章也有半个多月了.不过在上一篇文章<用CIL写程序:定义一个叫“慕容小匹夫”的类>中,匹夫和各位 ...
- 对C语言islower、isupper、isdigit函数的测试
今天朋友问起了这三个函数,我就帮忙测试了下,测试后发现谭浩强第四版课本附录上上讲的不是很严谨. 我们先看下这三个函数介绍: 谭浩强第四版课本附录第396页上这样介绍: 函数名 函数原型 功能 返回值 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...