账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack4 + react-hot-loader 修改state页面不能热更新
    30
    0

    按照文档配置 https://github.com/gaearon/re... 当修改文件中的state的name字段时,页面不会更新,但是修改render函数中的button text,页面就会更新?

    "dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js"
    
    

    base config

    const path = require('path');
    const APP_PATH = path.resolve(__dirname, '../app');
    const DIST_PATH = path.resolve(__dirname, '../dist');
    
    module.exports = {
      entry: {
        app: './app/index.js',
        vendors: ['react', 'react-dom']
      },
      output: {
        filename: 'js/bundle.js',
        path: DIST_PATH
      },
      module: {
        rules: [
          {
            test: /\.js?$/,
            use: 'babel-loader',
            include: APP_PATH
          }
        ]
      }
    };
    

    dev config

    
    module.exports = merge(baseWebpackConfig, {
      mode: 'development',
      output: {
        filename: 'js/[name].[hash:16].js'
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: 'public/index.html',
          inject: 'body',
          minify: {
            html5: true
          },
          hash: false
        }),
        new webpack.HotModuleReplacementPlugin()
      ],
      devServer: {
        port: '3015',
        contentBase: path.join(__dirname, '../public'),
        compress: true, // gzip
        historyApiFallback: true,
        hot: true, // 启用 webpack 的模块热替换特性
        https: false,
        noInfo: false,
        open: true, // open the browser
        proxy: {}
      }
    });
    

    index.js

    
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    
    ReactDOM.render(
      <App />,
      document.getElementById('root')
    );
    

    App.js

    import React from 'react';
    import { hot } from 'react-hot-loader';
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          name: 'world',
          show: true
        };
      }
    
      render() {
        return <div>
          {this.state.show && <button>button</button>}
          <h1>Hello, {this.state.name}</h1>
        </div>;
      }
    }
    
    export default hot(module)(App);
    
    
    

    console在代码更新后可以打印log,但是页面不更新,什么原因?

    [WDS] 91% - additional asset processing.
    client:127 [WDS] 92% - chunk asset optimization.
    client:127 [WDS] 92% - after chunk asset optimization.
    client:127 [WDS] 93% - asset optimization.
    client:127 [WDS] 93% - after asset optimization.
    client:127 [WDS] 94% - after seal.
    client:127 [WDS] 95% - emitting.
    client:127 [WDS] 95% - emitting (HtmlWebpackPlugin).
    2VM5824 client:127 [WDS] 98% - after emitting.
    2VM5824 client:127 [WDS] 100% - Compilation completed.
    VM5824 client:218 [WDS] App hot update...
    VM5849 log.js:24 [HMR] Checking for updates on the server...
    client:218 [WDS] App hot update...
    log.js:24 [HMR] Checking for updates on the server...
    log.js:24 [HMR] Nothing hot updated.
    log.js:24 [HMR] App is up to date.
    VM5849 log.js:24 [HMR] Updated modules:
    VM5849 log.js:24 [HMR]  - ./app/App.js
    VM5849 log.js:24 [HMR] App is up to date.
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • Renounceヾ(放弃) 普通会员 1楼

      在使用Webpack4和React Hot Loader时,如果state页面不能热更新,可能是由于以下原因:

      1. 状态管理错误:在状态页面中,你需要正确地管理状态。例如,你可能需要使用React的useReducer函数来管理状态,或者使用Redux等状态管理库。

      2. React组件更新顺序:在React中,组件的更新顺序可能会影响state的更新。例如,如果你在组件A的state中添加了新的数据,然后在组件B中使用这个数据,那么组件B的state可能不会立即更新。

      3. 在线或离线模式:在使用Webpack4和React Hot Loader时,你需要在不同模式下正确地管理状态。例如,在离线模式下,你可能需要在代码中手动调用React的API来获取state。

      4. 状态的类型:在Webpack4中,状态的类型可能会影响state的更新。例如,如果你在状态中使用了字符串或对象作为状态类型,那么在React中,这些类型的state可能无法被热更新。

      解决这些问题的方法可能包括:

      1. 修复状态管理错误:确保你的状态管理函数正确地处理了state的变化。

      2. 重新考虑React组件更新顺序:考虑使用Redux等状态管理库来解决这个问题。

      3. 使用在线或离线模式:根据你的需求来选择在线或离线模式。

      4. 更改状态的类型:根据你的需求来选择不同的状态类型。

      希望这些信息对你有所帮助!

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部