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的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
随机推荐
- Codeforces Round #249 (Div. 2) 总结
D.E还是很难的.....C不想多说什么... A:提意:给出每一组人的个数,以及一次车载容量,求出最少需要多少次才能载走所有的人. water: http://codeforces.com/cont ...
- Codeforces Round #239(Div. 2) 做后扯淡玩
今天补了下 cf 239div2 顿时信心再度受挫 老子几乎已经木有时间了啊 坐着等死的命.哎!!! 到现在还只能做大众题,打铁都不行. 每次D题都是有思路敲错,尼玛不带这么坑爹的. 哎!不写了,写这 ...
- noip模拟赛 铺瓷砖
[问题描述]有一面很长很长的墙. 你需要在这面墙上贴上两行瓷砖. 你的手头有两种不同尺寸的瓷砖, 你希望用这两种瓷砖各贴一行.瓷砖的长可以用分数表示,贴在第一行的每块瓷砖长度为A/B贴在第二行的每块瓷 ...
- FFT模板(From MG)
#include<cstdio> #include<cmath> #include<algorithm> using namespace std; struct c ...
- 在docker上安装运行mysql实例
ps:实验环境是:CentOS Linux release 7.3 64位1.获取mysql镜像从docker hub的仓库中拉取mysql镜像docker pull mysql查看镜像docker ...
- 微信企业号开发:corpsecret究竟在哪块呢?
开发微信企业号,获取ACCESS_TOKEN是必须的,但怎样获取ACCESS_TOKEN呢? 获取access_token=ACCESS_TOKEN" style="text-de ...
- IOS开发之block应用
非常长时间都是在学习各位大神的力作,并汲取了不少养料,在此一并谢过各位大神了. 当然了.好东西是要跟大家一起分享的,近期发现了几个很不错的个人网站,都是介绍IOS开发的.当中有唐巧.破船之长.池建强. ...
- 导出excel——弹出框
表单提交 凡是表单提交(表单提交分3种,见以下的1.2.3)的话.而且设置了表单标签的enctype="multipart/form-data"属性.那么这个时候就会打开弹出框. ...
- Fragment中的setUserVisibleHint()方法调用
使用Fragment的时候难免会遇到想在视图可见与不可见之中做些操作.此时一般会想到类似Activity中的onResume()和onPause()方法.Fragment中也确实有这两个方法,然而亲測 ...
- 在Tomcat服务器中去端口访问域名
在刚购买域名并解析后,从外网访问Tomcat服务器时是需要在域名后面加端口":8080".要去端口访问的步骤如下: 在Tomcat目录下的conf文件夹下,打开server.xml ...