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学习笔记的更多相关文章

  1. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  2. React Native学习笔记之2

    1:如何创建一个react native工程 首先进入到指定文件夹里面,然后在终端执行react-native init ReactNativeProject :其中ReactNativeProjec ...

  3. React Native学习笔记之1

    1:运行React Native报连接错误解决 解决方式: 在终端进入项目文件里,然后执行:(cd Pods/React; npm run start) 2:组件生命周期介绍 创建阶段 1. getD ...

  4. react native 学习笔记

    假设你的机器现在还没安装任何环境. 不同的操作系统.不同的目标平台,具体的步骤也会有所不同.如果你想同时开发android和ios也没问题,只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同 本 ...

  5. React Native学习笔记-1:JSC profiler is not supported.

    新建React-Native工程,直接编译运行报错,控制台错误信息如下: 2016-02-22 16:49:47.317 [info][tid:com.facebook.React.JavaScrip ...

  6. React Native学习笔记-1:JSC profiler is not supported.(转载)

    运行react-native中Example下的UIEXPLORER Project 遇到虾面报错: 2016-03-21 14:12:18.941 [trace][tid:com.facebook. ...

  7. React Native 开发笔记

    ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...

  8. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  9. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

随机推荐

  1. CYQ.Data V5 从入门到放弃ORM系列:教程 - MAction类使用

    背景: 随着V5框架使用者的快速增加,终于促使我开始对整个框架编写完整的Demo. 上周大概花了一星期的时间,每天写到夜里3点半,终完成了框架所有功能的Demo. 同时,按V5框架名称空间的顺序,对每 ...

  2. 分布式存储 FastDFS-5.0.5线上搭建

    前言:       由于公司项目需要,最近开始学习一下分布式存储相关知识,确定使用FastDFS这个开源工具.学习之初,自己利用VMware虚拟机搭建了一个5台机器的集群,摸清了安装过程中可能出现的问 ...

  3. Bellman-Ford 单源最短路径算法

    Bellman-Ford 算法是一种用于计算带权有向图中单源最短路径(SSSP:Single-Source Shortest Path)的算法.该算法由 Richard Bellman 和 Leste ...

  4. 数据预处理中归一化(Normalization)与损失函数中正则化(Regularization)解惑

    背景:数据挖掘/机器学习中的术语较多,而且我的知识有限.之前一直疑惑正则这个概念.所以写了篇博文梳理下 摘要: 1.正则化(Regularization) 1.1 正则化的目的 1.2 正则化的L1范 ...

  5. Android开发学习之路-记一次CSDN公开课

    今天的CSDN公开课Android事件处理重难点快速掌握中老师讲到一个概念我觉得不正确. 原话是这样的:点击事件可以通过事件监听和回调两种方法实现. 我一听到之后我的表情是这样的: 这跟我学的看的都不 ...

  6. C#设计模式-备忘录模式

    访问者模式的实现是把作用于某种数据结构上的操作封装到访问者中,使得操作和数据结构隔离.而本文要介绍的备忘者模式与命令模式有点相似,不同的是,命令模式保存的是发起人的具体命令(命令对应的是行为),而备忘 ...

  7. MySQL基础笔记

    一.登录参数 -D 打开指定数据库 -h 服务器名称 -p 密码 -P 端口 -u 用户名 -V 输出版本信息并退出 --prompt 提示符 mysql> ,或者登陆后 用prompt命令 提 ...

  8. 新项目的CQRS设计

    刚换了个工作,闲话不说了.前两天开始一个新项目,大概是一个任务管理系统,由使用者来选取任务,执行任务,反馈完成,我大概做了些设计,本来是打算看能不能在新公司铺垫一下DDD,不过后来这块功能没分到我这, ...

  9. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...

  10. TeamCity : 配置 Build 过程

    Build 过程往往是比较复杂的,因此 TeamCtiy 通过 build 步骤的方式让您可以实现不同的应用场景.您可以在每个 build 步骤中只做一件事情,然后把一系列的 build 步骤组织起来 ...