React Native组件间通信
React Native组件间通信
React Native组件的关系有:父子关系、无直接关系。组件间通信主要针对这两类来讨论。
一、父组件和子组件之间通信
父组件向子组件传递消息、数据通过对子组件的属性赋值来实现。比如styles属性、placeholder属性等。
子组件向父组件传递消息、数据通过回调父组件传递给自己的回调函数来实现。回调函数由父组件设置,被保存在子组件的某个属性中。
二、无直接关系的组件之间通信
无直接关系的组件之间通信是通过本地数据的存储和读取来完成。
2.1 AsyncStorage
AsyncStorage与localStorage类似,存储的数据是永久存储,不会因为退出A应用而自动删除数据。
AsyncStorage不提供索引、排序等数据库中经常使用的功能。它只是一个简单的、异步的“键值对”(key - value)存储系统,开发者可以用它来取代Android的sharedperference和IOS的NSUserDefaults。通过AsyncStorage的静态方法,数据会保存到手机存储空间中。开发者不需要指定,也不需要关心数据保存在了什么文件或者数据库、表中,AsyncStorage存储的数据对该React Native应用都是全局可访问的,开发这只需要知道能通过AsyncStorage增、删、改、查数据就可以了。
2.1.1 写入数据
写入一组数据:
AsyncStorage.setItem('key', 'value').then(
() =>{
//这里写当数据保存成功后需要做的操作
},
(error) =>{
//这里写操作失败的处理
}
);
写入多组数据:
AsyncStorage.setItem( [ ['key1', 'value2'],['key2' , 'value2'] ]).then(
() =>{
//这里写当数据保存成功后需要做的操作
}).catch( (errors) => {
if(errors.length > 0){ //保存操作有异常
}
else { //异常不是数据,有可能是成功操作的处理函数抛出的异常
}
});
2.1.2 读取数据
读取指定key的value:
AsyncStorage.getItem('key').then(
(result) => {
if(result === null){
//存储中没有指定键对应的值
return ;
}
//读取成功的操作
}
).catch((error) =>{
//读取失败的操作
});
读取多组数据:
AsyncStorage.multiGet(['key1', 'key2']).then(
(results) => {
console.log(results[0][0]); //key1
console.log(results[0][1]); //value1
console.log(results[1][0]); //key1
console.log(results[1][1]); //value2
}
).catch((error) =>{
//读取失败的操作
});
2.1.3 删除数据
删除单个数据:
AsyncStorage.removeItem('key', 'value').then(
() =>{
//这里写当数据删除成功后需要做的操作
},
(error) =>{
//这里写操作失败的处理
}
);
删除多组数据:
AsyncStorage.multiRemove( ['key1', 'value2'] ).then(
() =>{
//这里写当数据删除成功后需要做的操作
}).catch( (errors) => {
if(errors.length > 0){ //保存操作有异常
}
else { //成功操作的处理函数抛出的异常
}
});
删除所有数据:
AsyncStorage.clear().then(
()=>{
//数据全部删除成功的操作
}
).catch((error) =>{
//操作失败或者成功处理抛出异常
})
2.2 JSON对象
读取JSON文件:
let data = require('./data/myData.json');
将JSON对象转化为字符串:
let jsonString = JSON.stringify(data);
将字符串转化为JSON对象:
let data11 = JSON.parse(jsonString);
JSON类的parse函数要求严格,不允许有尾逗号。
JSON.parse('{"phone":"13838389438",}');
上面的代码会抛出异常。
使用AsyncStorage来保存数据,只能保存一个字符串类型的数据。前后两次保存相同的key值,后一次会覆盖上一次的数据。在应用中,可以配合使用AsyncStorage和JSON。
React Native组件间通信的更多相关文章
- React的组件间通信
一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...
- React中组件间通信的方式
React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...
- React独立组件间通信联动
React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...
- React 精要面试题讲解(二) 组件间通信详解
单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...
- React 组件间通信介绍
React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍: 父组件向子 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- react系列(三)组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- 【BZOJ4199&UOJ131】品酒大会(后缀数组,并查集)
题意: 两杯“r相似” (r>1)的酒同时也是“1 相似”.“2 相似”.…….“(r−1) 相似”的. n<=300000 abs(a[i])<=10^9 思路:对于i,j两个后缀 ...
- Codeforces Round #391(div 1+2)
A =w= B QuQ C 题意:有n个体育场,每个体育场有一些小精灵,一共m种小精灵(n<=1e5,m<=1e6),可以将数字全为i的精灵进化成j(可以互相进化也可以选择不进化),问有多 ...
- Oracle RAC load blance
首先声明 本文基本是阅读 大话RAC 后的笔记.OK, 进入正题. Oracle 10g RAC中采取两种方式提供负载均衡.第一种是connection blance.在用户连接的时候,根据随机算法把 ...
- eclipse编译项目用maven编译问题
1.eclipse只是个ide开发环境,并没有编译器功能.没有编译器.eclipse编译项目只是调jdk本地的java编译器.maven是单独编译,eclipse可以调用maven编译, 在eclip ...
- jQuery 中ready与load事件
jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...
- MVC之ActionFilterAttribute
1.登录页面代码: @{ ViewBag.Title = "会员登录"; Layout = "~/Views/Shared/_LayoutDialog.cshtml&qu ...
- python-pexpect_01安装
一:python2.7.12安装 #获取python2.7.12 wget https://www.python.org/ftp/python/2.7.12/Python-2.7.12.tgz ...
- css中合理的使用nth-child实现布局
写这篇文章的目的.主要是今天要实现一个布局:li.每行三个,总数不定.仅仅能相邻的li之间须要10px的间距.效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...
- mac 下安装Anaconda Python
# 将anaconda的bin目录加入PATH echo 'export PATH="/Users/work/anaconda/bin/:$PATH"' >> ~/.b ...
- CMDBuild安装及webservice接口的获取
近期项目组之前一直使用的OneCMDB出现了问题,在增删改数据时异常的慢.于是考虑能否够优化OneCMDB.由于本人水平有限,对OneCMDB进行代码级别的优化临时还有点难度.于是就对现有的其它开源C ...