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组件间通信的更多相关文章

  1. React的组件间通信

    一.React的单向数据流 React是单向数据流,数据主要从父节点传递到子节点(通过props).如果顶层(父级)的某个props改变了,React会重渲染所有的子节点.这通常被称为“自顶向下”或“ ...

  2. React中组件间通信的方式

    React中组件间通信的方式 React中组件间通信包括父子组件.兄弟组件.隔代组件.非嵌套组件之间通信. Props props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组 ...

  3. React独立组件间通信联动

    React是现在主流的高效的前端框架,其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法,而 ...

  4. [转] React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...

  5. React 中组件间通信的几种方式

    在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通 ...

  6. React 精要面试题讲解(二) 组件间通信详解

    单向数据流与组件间通信 上文我们已经讲述过,react 单向数据流的原理和简单模拟实现.结合上文中的代码,我们来进行这节面试题的讲解: react中的组件间通信. 那么,首先我们把看上文中的原生js代 ...

  7. React 组件间通信介绍

    React 组件间通信方式简介 React 组件间通信主要分为以下四种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面对这四种情况分别进行介绍:   父组件向子 ...

  8. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  9. react系列(三)组件间通信

    组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...

随机推荐

  1. 转载 - C - 枚举类型详解

    出处:http://www.cnblogs.com/JCSU/articles/1299051.html 注:以下全部代码的执行环境为VC++ 6.0 在程序中,可能需要为某些整数定义一个别名,我们可 ...

  2. Ubuntu 16.04下没有“用户和组”功能的问题解决

    在16.04以前的版本会自带“用户和组”的功能,但是在16.04发现系统只自带了“用户账户”的功能. 问题解决: 1.安装gnome-system-tools sudo apt-get install ...

  3. docker Cannot start container [8] System error: exec format error

    docker Cannot start container  [8] System error: exec format error 学习了:https://www.aliyun.com/jiaoch ...

  4. uva 11212 - Editing a Book(迭代加深搜索 IDA*) 迭代加深搜索

    迭代加深搜索 自己看的时候第一遍更本就看不懂..是非常水,但智商捉急也是没有办法的事情. 好在有几个同学已经是做过了这道题而且对迭代加深搜索的思路有了一定的了解,所以在某些不理解的地方询问了一下他们的 ...

  5. HDUJ 2070 Fibbonacci Number

    Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  6. Android Studio VS Eclipse (还在用Eclipse?你OUT了!)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990).谢谢支持! 公司派来一个去美国參加完AnDevCon大会的来给我们分享大会上学习的内容. AnDevC ...

  7. scanner使用中遇见的问题

    近期在学习的过程中遇见一个问题,问题不难但还是须要去认真对待. 先看看我写的源码 public static void main(String[] args){ for(;;){ Scanner in ...

  8. NYOJ_58最少步数(queue+BFS)

    描写叙述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1  1,0,0,1,0,0,1,0,1  1,0,0,1,1,0,0,0,1  1,0,1,0,1,1,0,1,1   ...

  9. hdoj 4925 Apple tree 【最小割】

    题目:pid=4925">hdoj 4925 Apple tree 来源:2014 Multi-University Training Contest 6 题意:给出一个矩阵,然后每一 ...

  10. 3730 无线网络发射选址[NOIP 0214 day2 T1]

    3730 无线网络发射选址  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解  查看运行结果     题目描述 Description 随着智能手机的日 ...