Fatal编程技术网
  • reactjs/
  • Reactjs 反应热加载程序不保存状态。v、 4.12.21

Reactjs 反应热加载程序不保存状态。v、 4.12.21

reactjs

Reactjs 反应热加载程序不保存状态。v、 4.12.21,reactjs,webpack-dev-server,webpack-4,react-hot-loader,Reactjs,Webpack Dev Server,Webpack 4,React Hot Loader,我遵循给定的步骤 安装 npm安装反应热加载程序 将react hot loader/babel添加到您的。babelrc: //B.法律改革委员会 { “插件”：[“react hot loader/babel”] } 将根组件标记为热导出： //Button.js class Button extends React.Component { constructor(props) { super(props); this.state = { counter: 1

我遵循给定的步骤

安装 npm安装反应热加载程序

将react hot loader/babel添加到您的。babelrc:

//B.法律改革委员会 { “插件”：[“react hot loader/babel”] }

将根组件标记为热导出：

//Button.js

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1,
    };
  }

  handleClick = () =>
    this.setState({
      counter: this.state.counter + 1,
    });

  render() {
    return (
      <div>
        <h2> Cool Counter {this.state.counter} !!!!</h2>
        <button onClick={this.handleClick}>{this.state.counter}</button>
      </div>
    );
  }
}

export default hot(Button);
使用网页包别名

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
};
//index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React-Hot-Loader-Test</title>
  </head>

  <body>
    <div id="container"></div>
    <script src="/public/main.js"></script>
    <link href="/public/main.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  </body>
//webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
     main: ['react-hot-loader/patch', './src/main.js'],
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
    modules: [path.resolve('./src'), path.resolve('./node_modules')],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: devMode ? '[name].js' : '[name].[chunkhash].js',
    publicPath: '/public/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,            
        use: ['react-hot-loader/webpack', 'babel-loader'],
        
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : 's[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],  
  
};

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
    main: ['webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/main.js'],
    // main: ['react-hot-loader/patch', './src/main.js'],
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
    modules: [path.resolve('./src'), path.resolve('./node_modules')],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: devMode ? '[name].js' : '[name].[chunkhash].js',
    publicPath: '/public/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        // use: {
        //   loader: 'babel-loader',
        //   // options: {
        //   //   presets: ['@babel/preset-env', '@babel/preset-react'],
        //   // },
        // },
        use: ['react-hot-loader/webpack', 'babel-loader'],
        //use: ['babel-loader'],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : 's[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],

  // devServer: {
  //   contentBase: path.join(__dirname),
  //   compress: false,
  //   port: 8080,
  //   historyApiFallback: true,
  //   watchContentBase: false,
  //   publicPath: '/public/',
  // },
};
//B.法律改革委员会

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties", "react-hot-loader/babel"]
}
最后运行2命令

1. webpack -d
2. node server.js
结果: λ节点服务器启动并运行

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /public/
i ｢wds｣: Content not from webpack is served from G:\Projects\React-Second
i ｢wds｣: 404s will fallback to /index.html
react热加载仅适用于html、css、jsx更改

问题： 钩子在点击按钮时不存储以前的状态，然后更改任何css、html或jsx、UseState或Set state而不保留状态，它总是从1开始

请帮帮我，我错过了什么，我已经挣扎了好几个小时了

问候

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
};
沙兹找到了解决办法

//webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
     main: ['react-hot-loader/patch', './src/main.js'],
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
    modules: [path.resolve('./src'), path.resolve('./node_modules')],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: devMode ? '[name].js' : '[name].[chunkhash].js',
    publicPath: '/public/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,            
        use: ['react-hot-loader/webpack', 'babel-loader'],
        
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : 's[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],  
  
};

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
    main: ['webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/main.js'],
    // main: ['react-hot-loader/patch', './src/main.js'],
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
    modules: [path.resolve('./src'), path.resolve('./node_modules')],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: devMode ? '[name].js' : '[name].[chunkhash].js',
    publicPath: '/public/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        // use: {
        //   loader: 'babel-loader',
        //   // options: {
        //   //   presets: ['@babel/preset-env', '@babel/preset-react'],
        //   // },
        // },
        use: ['react-hot-loader/webpack', 'babel-loader'],
        //use: ['babel-loader'],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : 's[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],

  // devServer: {
  //   contentBase: path.join(__dirname),
  //   compress: false,
  //   port: 8080,
  //   historyApiFallback: true,
  //   watchContentBase: false,
  //   publicPath: '/public/',
  // },
};
找到了解决办法

//webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
     main: ['react-hot-loader/patch', './src/main.js'],
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
    modules: [path.resolve('./src'), path.resolve('./node_modules')],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: devMode ? '[name].js' : '[name].[chunkhash].js',
    publicPath: '/public/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,            
        use: ['react-hot-loader/webpack', 'babel-loader'],
        
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : 's[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],  
  
};

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
    main: ['webpack-dev-server/client?http://localhost:8080', 'webpack/hot/only-dev-server', './src/main.js'],
    // main: ['react-hot-loader/patch', './src/main.js'],
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
    modules: [path.resolve('./src'), path.resolve('./node_modules')],
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: devMode ? '[name].js' : '[name].[chunkhash].js',
    publicPath: '/public/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        // use: {
        //   loader: 'babel-loader',
        //   // options: {
        //   //   presets: ['@babel/preset-env', '@babel/preset-react'],
        //   // },
        // },
        use: ['react-hot-loader/webpack', 'babel-loader'],
        //use: ['babel-loader'],
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : 's[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],

  // devServer: {
  //   contentBase: path.join(__dirname),
  //   compress: false,
  //   port: 8080,
  //   historyApiFallback: true,
  //   watchContentBase: false,
  //   publicPath: '/public/',
  // },
};