Question

我遇到了一个问题，当我在xCode中运行React-native APP时，它开始使用我的CPU的150%。疯了吧！我也不知道为什么呢？我正在使用webpack将我的babel转换成反应。

以下是我的所有模块：

"scripts": {
    "android-setup-port": "adb reverse tcp:8081 tcp:8080",
    "start": "env NODE_ENV=DEV rnws start --hostname localhost",
    "build": "env NODE_ENV=PRODUCTION rnws bundle",
    "test": "eslint src",
    "debugger-replace": "remotedev-debugger-replace --hostname localhost --port 5678",
    "remotedev": "npm run debugger-replace && remotedev --hostname localhost --port 5678"
  },
  "engines": {
    "node": ">=4",
    "npm": ">=2 <4"
  },
  "dependencies": {
    "@exponent/react-native-navigator": "^0.4.1",
    "file-loader": "^0.8.5",
    "immutable": "^3.7.5",
    "react-native": "^0.19.0",
    "react-native-button": "^1.3.1",
    "react-native-form": "^1.0.6",
    "react-native-google-places-autocomplete": "^1.1.6",
    "react-native-maps": "^0.3.0",
    "react-redux": "^4.0.6",
    "redux": "^3.0.4",
    "redux-thunk": "^1.0.3",
    "tcomb-form-native": "^0.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.3.17",
    "babel-eslint": "^5.0.0-beta6",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "clean-webpack-plugin": "^0.1.5",
    "eslint": "^1.10.3",
    "eslint-loader": "^1.1.1",
    "eslint-plugin-react": "^3.11.2",
    "react-native-webpack-server": "^0.8.3",
    "remote-redux-devtools": "0.0.10",
    "remote-redux-devtools-on-debugger": "^0.2.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }

这是我的webpack配置：

var path = require('path'),
    webpack = require('webpack'),
    Clean = require('clean-webpack-plugin');
   // {
   //              test: /\.(jpe?g|png|gif|svg)$/i,
   //              loaders: [
   //                  'url?limit=8192',
   //                  'img'
   //              ]
   //          },
var dev = process.env.NODE_ENV === 'DEV' ? true : false,
    production = process.env.NODE_ENV === 'PRODUCTION' ? true : false;

module.exports =  {
    // debug: false,
    // devtool: 'source-map',
    entry: {
        'index.ios': ['./src/index.jsx'],
        'index.android': ['./src/index.jsx'],

    },
    output: {
        path: path.resolve(__dirname, '__build__'),
        filename: '[name].js'
    },
    module: {
        loaders: [
        { test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
        {
            test: /\.jsx?$|\.js?$/,
            include: [
                path.resolve(__dirname, 'src'),
                path.resolve(__dirname, './config'),
                path.resolve(__dirname, 'node_modules/react-native/Libraries/react-native'),
                path.resolve(__dirname, 'node_modules/react-native-navbar'),
                // path.resolve(__dirname, 'node_modules/react-native-maps'),
                path.resolve(__dirname, 'node_modules/react-native-google-places-autocomplete'),
                path.resolve(__dirname, 'node_modules/@exponent'),
                path.resolve(__dirname, 'node_modules/react-clone-referenced-element')
            ],
            loader: 'babel',
            query: {
                presets: ['es2015', 'stage-0', 'react']
            },
        },

        ]
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        modulesDirectories: [
            'node_modules',
            './config',
            './src/',
            './src/components',
            './src/layouts',
            './src/scripts/',
            './src/scripts/actions/',
            './src/scripts/api/',
            './src/scripts/containers/',
            './src/scripts/reducers/'
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __PROD__  : production,
            __DEV__   : dev
        })
    ].concat(production ? [
        new webpack.optimize.UglifyJsPlugin(),
        new Clean(['__build__'])
    ] : [])
};

有没有人知道为什么会这样？我在谷歌搜索过所有的解决方案，但不能！

更新1：

我还没有解决这个问题。但是，我没有运行Simulator，而是将iPhone连接起来作为device。至少这会减轻CPU的压力。

更新2：

因此，在我开发过程中，我对此问题视而不见，因为我不想花太长时间调试它。我认为问题在于需要不需要的文件，在对象上使用for循环而不是在数组中使用对象并使用.map(映射它们，将var更改为const和{ {1}}，更新我的反应代码以符合let。

这帮了很多忙！ es6 standards使用率下降并且正常运行。

更新3：

更新2 确实提供了很多帮助。但我发现了CPU受到限制的另一个原因。启用CPU后live reload我的CPU使用情况直接跳至150+%，我的计算机粉丝开始正常运行。

奇怪的是我的live reload从未实际工作过？但无论如何希望这会有所帮助！

Answer 1

所以我终于找到了为什么会这样。它与模拟器提供的live reload功能有关。

激活后，我的计算机CPU立即跳转到150+%。现在我不确定为什么会这样？我应该补充的另一件事是我的live reload从未真正起作用，也许我没有设置正确的东西。

无论如何，希望这有帮助！如果有人能够确认或复制这个问题并回复我，那就太棒了！我在github上报告了一个问题：https://github.com/facebook/react-native/issues/6752

只需disable live reload。

React-native占用150-200％的计算机CPU

更新1：

更新2：

更新3：

1 个答案: