Question

美好的一天！也许这是一个糟糕的问题，但我无法找到答案。我有一个面向json对象的React app，它从外部动态变化。

来自资产净值的代码：

   import MultiTable from '../multi';
   import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
   import Clock from '../clock'

   let routes = [
     {
       exact: true,
       path: '/Main',
       main: () => <Main />
     },
     {
       path: '/MultiTable',
       main: () => <MultiClock />
     }
   ];

   function requireAll(requireContext) {
     return requireContext.keys().map(requireContext);
   }

   const Configs = requireAll(require.context('../../../src/configs', false, /.json$/));
   const Files = requireAll(require.context('../../../src/data', false, /.json$/));

   const Multi = () => (
     <MuiThemeProvider>
       <MultiTable allData={[Files, Configs]}/>
     </MuiThemeProvider>
   );

   const MultiClock = () => (
     <div>
       <Clock/>
       <Multi/>
     </div>
   );

export default class Nav extends React.Component {
render() {
    return (
      <Router history='vah'>
        <div style={{display: 'flex'}} ref="nav">
          <Drawer
            docked={true}
            width={200}
          >
            <Link to='/Main' key="main">Main</Link>
            <Link to='/MultiTable' key="multi">WithClock</Link>
          </Drawer>
          <div style={{flex: 1}}>
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.main}
              />
            ))}
          </div>
        </div>
      </Router>
    );
  }
}

应用程序在我的开发服务器上使用jsons和热重新加载器形成表格我总是看到传入的信息而没有完整页面刷新。但是当我添加新的＆＃34;静态＆＃34;画布上的组件 - 时钟 - 当文件或配置中的内容发生变化时，时钟也会刷新并闪烁（显示他正在重装。）

在我的逻辑中：时钟不与文件和配置交叉，并且在文件更改时不得更新。< / p>

为什么会这样？

___ UPD1：我想了解为什么如果更改多中的某些数据，元素时钟也在重新刷新，我也不需要这样，导致闪烁。

___ UPD2：

webpack config：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://192.168.1.33:3000',
    'webpack/hot/only-dev-server',
    './app/index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/static/'
  },
  module: {
    rules: [
      {test: /\.jsx?$/, use: ['babel-loader'], exclude: /node_modules/},
      {test: /\.(less|css)$/, loader: 'style-loader!css-loader!less-loader'},
      {test: /\.(xml)$/, loader: 'xml-loader'},
      {test: /\.(svg|png|jpg|jpeg|gif|ico|eot|otf|ttf|woff|woff2)$/, loader: 'file-loader'}
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  devServer: {
    host: '192.168.1.33',
    port: 3000,
    historyApiFallback: true,
    hot: true,
    compress: true
  }
};

.babelrc ：

中的

{
  "presets": [
    ["es2015", {"modules": false}],
    "stage-2",
    "react"
  ],
  "plugins": [
    "react-hot-loader/babel"
  ]
}

主要条目 /app/index.js：

import React from 'react';
import ReactDOM  from 'react-dom'
import {AppContainer} from 'react-hot-loader'
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Nav from './navigation/nav';
import './index.less';

const rootEl = document.getElementById('root');
const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <MuiThemeProvider>
        <Component />
      </MuiThemeProvider>
    </AppContainer>,
    rootEl
  )
};

render(Nav);

if (module.hot) {
  module.hot.accept('./navigation/nav', () => {
    render(Nav)
  })
}

也许我在配置中确实做了一些错误，并且没有完全理解这些技术必须如何运作。热装载机+的WebPack +路由器

React刷新并不是状态更新的所有元素

0 个答案: