webpack+react+antd项目编写过程中遇到的问题

一. webpack配置项目自动编译，页面自动刷新

var path = require("path");
var webpack = require("webpack");
var CSS_PATH = path.resolve(__dirname, 'css');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ....

    plugins: [
        new webpack.HotModuleReplacementPlugin(),//热加载插件
        //单单使用hmr，当我们修改index.html的时候其实这个页面并不会自动刷新。这里我理解为，
        // 我们的入口文件index.js里面导入的是test.scss所以这个文件被webpack监听了，
        // 然而html模板文件并没有相关导入，因此还需要映入HtmlWebpackPlugin插件
        //参考 http://www.jianshu.com/p/9600116437b0
        new HtmlWebpackPlugin({template: './index.html'}),

       //This ensures that no assets are emitted that include errors.
        new webpack.NoEmitOnErrorsPlugin(),
        new UglifyJSPlugin(),
        //By separating common modules from bundles,
        // the resulting chunked file can be loaded once initially,
        // and stored in cache for later use
        new webpack.optimize.CommonsChunkPlugin({
            name:"vendors",
            filename:"vendors.js"
        })
    ]
    ...
};

参考文章：
http://www.jianshu.com/p/9600116437b0

二. react支持箭头函数以及antd按需引入

react支持箭头函数：
react支持箭头函数 需要安装四个组件
npm install –save-dev babel-preset-es2015
npm install –save-dev babel-preset-react
npm install –save-dev babel-preset-stage-0
npm install –save-dev babel-plugin-transform-class-properties
并在webpack.config.js中做以下配置

options:{
         presets:['react','es2015',"stage-0"],
          plugins: [['import', options],["transform-class-properties"]]
 }

参考文章：http://blog.csdn.net/moxuelang/article/details/72863540

antd按需引入：
通过使用 babel-plugin-import插件引入antd 可以仅加载使用到的组件
通过下载babel-plugin-import,以及plugins: [['import', options],] 配置实现
参考文章：https://ant.design/docs/react/introduce-cn#示例

module.exports = {
...
  module:{
      rules:[
            {
                test:/\.js?$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:['react','es2015',"stage-0"],
                    plugins: [['import', options],["transform-class-properties"]]
                }
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader'
                    ,'css-loader'
                    ,'less-loader'
                ]
            },
            { test: /\.css$/, loader: "style-loader!css-loader" },
            //file-loader
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
            //url-loader 在文件小于limit时，返回url;大于limit时，类似file-loader，直接返回文件
            { test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' }
        ]
    }
};    

三.React State

使用state时注意：
(1)绝对不要 直接改变 this.state ，因为之后调用 setState() 可能会替换掉你做的改变。把 this.state 当做是不可变的。
若直接对state进行了修改，state是引用，store内部的state同样也就变了，这样导致React-Redux认为dispatch前后state没有改变，就不会重新渲染UI，实际state已经改变。

(2)setState() 不会立刻改变 this.state ，而是创建一个即将处理的 state 转变。在调用该方法之后访问 this.state 可能会返回现有的值。

对 setState 的调用没有任何同步性的保证，并且调用可能会为了性能收益批量执行。

(3)setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果可变对象被使用了，但又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

参考文章：
http://www.cnblogs.com/little-ab/articles/6958852.html