美文网首页javascriptf8app
f8app代码学习的要点(1)

f8app代码学习的要点(1)

作者: smartphp | 来源:发表于2016-10-26 17:06 被阅读117次

    ****f8app代码学习的要点有:****

    1 parseServer,redux-persit.这是后台的服务器和state的持久化保存。可以暂时不看
    2 fbsdk.这个是facebook的东西,暂时可以不看,碰到登录逻辑是直接跳过

    上面两个部分可以放到以后再看,不是学习的主要内容,可以先跳过。我前面纠结这两个问题,浪费了很多时间。

    3 如果看过其他其他的rn-redux的代码,可能就会很不舒服,container在哪里?这里没有标准的container文件夹,mapStateToProps和mapDispatchToProps都在每个需要state和dispatch的UI组件中单独使用,每个组件需要的state和dispatch也就地通过connect函数注入。开始可能会很不习惯这个写法,但是越是复杂一点的app,这样写出错误的机会就少一点。
    4 f8的代码看似复杂其实是在两个地方,一是UI本事的复杂性。这个复杂性体现在schedule中,a filter的使用,b listcontainer,c login d sticky header 这是组件的使用问题。慢慢一个一个研究,尤其是其中动画效果的使用。 二是UI与redux的交互问题。UI组件和redux的运行没有必然和直接的联系。两者不直接发生关系。连接的纽带是通过container API connect函数注入UI组件需要的交互方法和组件的状态。 redux(action,state)<-----connect(state,dispatch(action))--->UI(state,action).在纷繁的代码中认清这条主线,代码读起来就容易一点。
    5 上面说到的UI本身的东西在详细说一下,就是ios和android的代码复用问题。f8的代码复用不是简单的做一套代码供给ios和android使用,而是找到了两者UI内在的相似点,又同时考虑到了不同操作系统自身的设计模式。例如ios中使用tab切换组件,android使用draw切换组件。样式不同,但是组件的item是一样的,内容是一样的,只是形式不同。简单说可以认为是一个组件的样式不一样。这一点才是rn魅力所在,读f8app的代码尤其要注意这个思想。由于redux和UI组件不发生直接关系。所以可以直接修改UI,甚至是改掉所有的UI,但是State不会因此发生改变。样式的改变也遵循这个原则,根据不同的操作系统加载不同的样式,代码中有,仔细看,这些代码也是rn的魅力所在。
    6f8app现在不在更新了,rn版本现在是0.25.1。语法有点老了,而且在xcode8下面无法运行。需要重装xcode7+osx 10.11才能运行,但是意义不大,但是交互效果一定要看,appstore和google market都可以下载。如果电脑上编译代码,由于导入了redux-logger组件。可以结合Debugger查看state和dispatch的状态,每个点击,交互操作都可以看到相应的变化。编程的时候运行这个组件会非常有用。
    7 thunk的异步操作我觉得可能有点过时了。要学习新的app 代码可以看看 todomvc git clone https://github.com/thebakeryio/todomvc-react-native.git 这里面又用到了redux-sagas,immutalbe.js 这两个现在看来是rn里面两个重要的角色。需要好好看看。

    相关文章

      网友评论

        本文标题:f8app代码学习的要点(1)

        本文链接:https://www.haomeiwen.com/subject/xctjuttx.html