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. Codeforces Round #249 (Div. 2) 总结

    D.E还是很难的.....C不想多说什么... A:提意:给出每一组人的个数,以及一次车载容量,求出最少需要多少次才能载走所有的人. water: http://codeforces.com/cont ...

  2. Codeforces Round #239(Div. 2) 做后扯淡玩

    今天补了下 cf 239div2 顿时信心再度受挫 老子几乎已经木有时间了啊 坐着等死的命.哎!!! 到现在还只能做大众题,打铁都不行. 每次D题都是有思路敲错,尼玛不带这么坑爹的. 哎!不写了,写这 ...

  3. noip模拟赛 铺瓷砖

    [问题描述]有一面很长很长的墙. 你需要在这面墙上贴上两行瓷砖. 你的手头有两种不同尺寸的瓷砖, 你希望用这两种瓷砖各贴一行.瓷砖的长可以用分数表示,贴在第一行的每块瓷砖长度为A/B贴在第二行的每块瓷 ...

  4. FFT模板(From MG)

    #include<cstdio> #include<cmath> #include<algorithm> using namespace std; struct c ...

  5. 在docker上安装运行mysql实例

    ps:实验环境是:CentOS Linux release 7.3  64位1.获取mysql镜像从docker hub的仓库中拉取mysql镜像docker pull mysql查看镜像docker ...

  6. 微信企业号开发:corpsecret究竟在哪块呢?

    开发微信企业号,获取ACCESS_TOKEN是必须的,但怎样获取ACCESS_TOKEN呢? 获取access_token=ACCESS_TOKEN" style="text-de ...

  7. IOS开发之block应用

    非常长时间都是在学习各位大神的力作,并汲取了不少养料,在此一并谢过各位大神了. 当然了.好东西是要跟大家一起分享的,近期发现了几个很不错的个人网站,都是介绍IOS开发的.当中有唐巧.破船之长.池建强. ...

  8. 导出excel——弹出框

    表单提交 凡是表单提交(表单提交分3种,见以下的1.2.3)的话.而且设置了表单标签的enctype="multipart/form-data"属性.那么这个时候就会打开弹出框. ...

  9. Fragment中的setUserVisibleHint()方法调用

    使用Fragment的时候难免会遇到想在视图可见与不可见之中做些操作.此时一般会想到类似Activity中的onResume()和onPause()方法.Fragment中也确实有这两个方法,然而亲測 ...

  10. 在Tomcat服务器中去端口访问域名

    在刚购买域名并解析后,从外网访问Tomcat服务器时是需要在域名后面加端口":8080".要去端口访问的步骤如下: 在Tomcat目录下的conf文件夹下,打开server.xml ...