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. 【BZOJ4199&UOJ131】品酒大会(后缀数组,并查集)

    题意: 两杯“r相似” (r>1)的酒同时也是“1 相似”.“2 相似”.…….“(r−1) 相似”的. n<=300000 abs(a[i])<=10^9 思路:对于i,j两个后缀 ...

  2. Codeforces Round #391(div 1+2)

    A =w= B QuQ C 题意:有n个体育场,每个体育场有一些小精灵,一共m种小精灵(n<=1e5,m<=1e6),可以将数字全为i的精灵进化成j(可以互相进化也可以选择不进化),问有多 ...

  3. Oracle RAC load blance

    首先声明 本文基本是阅读 大话RAC 后的笔记.OK, 进入正题. Oracle 10g RAC中采取两种方式提供负载均衡.第一种是connection blance.在用户连接的时候,根据随机算法把 ...

  4. eclipse编译项目用maven编译问题

    1.eclipse只是个ide开发环境,并没有编译器功能.没有编译器.eclipse编译项目只是调jdk本地的java编译器.maven是单独编译,eclipse可以调用maven编译, 在eclip ...

  5. jQuery 中ready与load事件

    jquey有3种针对文档加载的方法: //document ready $(document).ready(function(){ //...代码... }) //document ready 简写 ...

  6. MVC之ActionFilterAttribute

    1.登录页面代码: @{ ViewBag.Title = "会员登录"; Layout = "~/Views/Shared/_LayoutDialog.cshtml&qu ...

  7. python-pexpect_01安装

    一:python2.7.12安装   #获取python2.7.12 wget https://www.python.org/ftp/python/2.7.12/Python-2.7.12.tgz   ...

  8. css中合理的使用nth-child实现布局

    写这篇文章的目的.主要是今天要实现一个布局:li.每行三个,总数不定.仅仅能相邻的li之间须要10px的间距.效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  9. mac 下安装Anaconda Python

    # 将anaconda的bin目录加入PATH echo 'export PATH="/Users/work/anaconda/bin/:$PATH"' >> ~/.b ...

  10. CMDBuild安装及webservice接口的获取

    近期项目组之前一直使用的OneCMDB出现了问题,在增删改数据时异常的慢.于是考虑能否够优化OneCMDB.由于本人水平有限,对OneCMDB进行代码级别的优化临时还有点难度.于是就对现有的其它开源C ...