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://www.52php.cn/article/p-fgrzhxtq-bpm.html

antd按需引入：
通过使用 babel-plugin-import插件引入antd 可以仅加载使用到的组件
通过下载babel-plugin-import,以及plugins: [['import',] 配置实现
参考文章：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