zoukankan      html  css  js  c++  java
  • RN调试

    https://facebook.github.io/react-native/docs/debugging.html

    热加载

      RN的目标是极致的开发体验,修改文件后能在1秒内看到变化,通过以下三个特征来实现:

    1. js的编译时间短
    2. 本地packager服务器可以把源文件(ES6,JSX,flow等)转换为通用的js代码,使用多个核心,转换中用到的中间代码保存在内存中,用于下次更快的增量修改
    3. 内置了live reload自动刷新

      有了以上功能,剩余的瓶颈就是刷新后会丢失app当前的状态,手动还原了当前要调试的状态需要花费比较多时间。解决这个问题需要在app运行的时候动态注入新的代码,这样app的状态就不会丢失了。

      因为js是有状态,所以热加载并不是十分完美。热加载在大部分时候是管用的,但出现意外后可以使用reload全部刷新,全部刷新总是很管用的。在RN0.22以后,点击开发者菜单的enable hot reloading启用热加载。

    热加载原理

      RN中的热加载是通过packager实现的,基础是webpack的hmr。packager通过hmr来检测文件变化,然后发送HMR update(包含了更新的模块代码以及json格式的模块间的依赖关系)到app里边的hmr runtime,接着runtime就会把新的代码替换上去。

      哪一个模块被修改了,那个模块就会收到一个hmr update。hmr update必须要被accept,否则会一直沿着依赖链往上传递。hmr update所经过的模块,这个模块的缓存就会被清除。

      热加载中,accept的删除是无效的,只能被替换和添加,替换和添加会马上生效。如C中没有accept,往C中添加一个accept,则C的代码会重新执行,刚添加的accept回调函数也会执行。

      哪个模块把hmr update accept了,这个模块的代码会重新执行(如果这个hmr update是从依赖的模块里传递上来的,则这个依赖也会被重新执行,因为这个依赖的缓存被清除过了),最后再调用accept的回调函数。假如A中有accept并且accept了一个hmr update,则A重新执行了。但是如果依赖于A的模块B早就require了A,则B使用的也还是旧缓存A,在B中需要再次require A才能获取到读取最新的A代码。

      对于react组件的热加载有些困难。在组件的jsx转换时,转换器会为每个组件都创建一个与之对应的代理和一个accept函数(里面的代码可以强制重新渲染页面),这些代理管理组件的状态并且触发对应组件的生命周期方法。这样就可以直接替换代码而且不会丢失状态了,因为状态保存在代理中,代理不会发生变化。使用这种转换需要配置babel-preset-react-native,如果要用在webpack中则使用react-transform

      明白了以上的道理后,下面这个例子也很好理解了:

    // configureStore.js
    import { createStore, applyMiddleware, compose } from 'redux';
    import thunk from 'redux-thunk';
    import reducer from '../reducers';
    
    export default function configureStore(initialState) {
      const store = createStore(
        reducer,
        initialState,
        applyMiddleware(thunk),
      );
    
      if (module.hot) {
        module.hot.accept(() => {
          const nextRootReducer = require('../reducers/index').default;
          store.replaceReducer(nextRootReducer);
        });
      }
    
      return store;
    };

      当reducers发生变化后,reducers中没有accept,所以hmr update往上传递到了上面这个store中,hmr update在这里被accept了,然后就把最新的reducer替换上去了。

    API

      在需要被热更新的模块内写上:

    module.hot.accept(() => {
      console.log('changed');
    });

      当模块代码被改变时,以上回调函数中的代码就会被执行。在少数情况下需要手动调用这个API,大部分时候,RN中的热加载是开箱即用的,而不需要自己写任何代码

    自动刷新

      启用开发者菜单中的enable live reload,当源文件发生变化时,packager会通知app重新刷新,会再次读取js bundle,js bundle会被packager再次打包然后响应回给app。

      当往资源目录中添加了资源(如图片)或者修改了native原生代码,需要重新构建app。

    错误和警告

      错误和警告在开发模式下会显示到app界面上。

      当app内发生错误,或者调用了console.error,则app界面会显示一个红色全屏的错误信息;当出现警告,或者调用了console.warn,则app底部会出现一个黄色工具栏显示警告信息。

    在chrome中调试js

      点击开发者菜单,启用debug js remotely。这会打开一个chrome标签(http://localhost:8081/debugger-ui)。在这个标签中打开调试窗口,可以看到app内的console输出,进入source,对js打断点,还可以进行js调试

      

  • 相关阅读:
    155. 最小栈
    160. 相交链表
    PAT 1057 Stack
    PAT 1026 Table Tennis
    PAT 1017 Queueing at Bank
    PAT 1014 Waiting in Line
    PAT 1029 Median
    PAT 1016 Phone Bills
    PAT 1010 Radix
    PAT 1122 Hamiltonian Cycle
  • 原文地址:https://www.cnblogs.com/hellohello/p/8306401.html
Copyright © 2011-2022 走看看