上次我们讲了组件,想必大家对React组件有了一定的了解了吧。但是离做一款app出来还是有很长的距离,一个好的架构能帮助开发者更好的完成高质量的代码。今日就来说道说道这个RN的架构怎么搭~(大佬们有见解可提出来啊)。
说起架构最为常用的就是,React Native + Redux,所有我们就来搭建这样一个框架。
1、Redux
这个具体看Redux文档吧,我只简单的说一下,React中又一个state状态变量,我们可以通过改变这个变量来局部刷新页面,那么当我有好多个页面同时都和这个state有关该如何做呢?这时就能够用到redux,redux提供了一个唯一的state树(后面将称之为store),将组件中的state连接到store,通过改变store中的值来改变多个组件中的state值,从而达到同步刷新的效果。redux中包括action与reducer,这两样都是为了方便组件来改变store中的state值。我个人理解action 就是方法申明,reducer就是方法实现。这里先不写action与reducer怎么写,毕竟我们要说的的是架构。
2、具体架构
我新建了一个app目录代表这是我实现app的部分,component表示react组件,action与reducer分别代表redux的两个模块,constant代表常量,util代表公共方法,image图片。component里的Home表示主页的组件,App是我们app具体的实现的一个入口。index是component索引(用ES6的import方法import进来component文件夹就会自动找到文件夹下的index.js文件 )。
这是比较基础的架构了,有想法的小伙伴也可自行扩展。
3、执行流程
我们知道RN程序的入口是index.xxx.js,分为iOS和android,而实际上我们只有一套代码,这就需要我们将这两个文件指向同一个js文件,我在这两个文件里都只写了一句话:
require('./app');
这句话其实就是执行了 ./app/index.js 文件。 这样我们真正的入口就变成了 ./app/index.js
我们再来看./app/index.js文件具体实现。
嘿嘿,这里我只给了截图,也是提醒大家不要光copy了,理解才最要。这里除了注册了app,还将app绑定到了redux,相比这几行代码也不难懂,我就不嚼舌头了哈哈,原谅我表述能力一般。这样就成功进入到我们的主程序App。
欲知后事如何,请听下回分解!