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