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. Rxjava Subjects

    上次提到调用observable的publish和connect方法后可以将一个Observable发出的对象实时传递到订阅在上的subscriber. 这个和Rxjava中Subject的概念十分相 ...

  2. php排序算法

    <?php//冒泡排序(数组排序) function bubble_sort($array){ $count = count($array); if ($count <= 0) retur ...

  3. zookeeper集群搭建

    1.由于是第一次搭建zk的集群,过程中遇到些问题,给自己也给遇到问题的人提供一种可能解决问题的方法. 第一步:下载zk的最新版,我下的是3.4.9,在zk的官网,下载后解压到/usr/local ta ...

  4. 在Linux Mint上安装node.js和npm

    1.安装Node.js 前端开发过程中,很多项目使用npm的http-server的模块来运行一个静态的服务器,我个人在Dell的笔记本上安装的是Linux Mint最新版本,所以想尝试一下在Linu ...

  5. Hibernate中的锁机制

    锁机制:是数据库为了保证数据的一致性<一个事务的各种操作不相互影响>而使各种共享资源在被并发访问访问变得有序所设计的一种规则,用来保证在当前用户进行操作数据的时候其他的用户不能对同一数据进 ...

  6. AFNetworking 3.0 源码解读(三)之 AFURLRequestSerialization

    这篇就讲到了跟请求相关的类了 关于AFNetworking 3.0 源码解读 的文章篇幅都会很长,因为不仅仅要把代码进行详细的的解释,还会大概讲解和代码相关的知识点. 上半篇: URI编码的知识 关于 ...

  7. 多项目并行开发如何做到快速切换——sublime Text3

    sublime text有一个很人性化的功能,就是打开窗口的时候,它会把上一次关闭时的编辑器工作区状态完全复原(不论文件是否已经保存). 只有一个项目的时候,这个功能非常方便,可以保证重启电脑后cod ...

  8. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  9. MVC5学习系列--Razor视图(一)

    前言 嗷~小弟我又出现了~咳咳..嚎过头了, 先说一说为什么写这个吧,~首先肯定是我自己需要学(废话 - -,)//,之前也写过MVC4的项目,嗯..但是仅限于使用并没有很深入的每个模块去了解, 这段 ...

  10. 利用Python进行数据分析(7) pandas基础: Series和DataFrame的简单介绍

    一.pandas 是什么 pandas 是基于 NumPy 的一个 Python 数据分析包,主要目的是为了数据分析.它提供了大量高级的数据结构和对数据处理的方法. pandas 有两个主要的数据结构 ...