react学习总结7--可能会遇到的BUG

react学习总结–可能会遇到的BUG

说明

像我这样的野路子新手，学习React的过程中，会遇到很多坑，下边列举了我遇到的一些问题以及解决办法，但是很遗憾，这篇文章是我初步完成项目的时候写的，有很多BUG，解决了就忘记了，只能根据记忆列举一些。

1.版本问题引起的BUG

这个问题很常见，因为 React、React-Router，在某几个版本之间有较大的改动，很多API，改变了用法，甚至有些直接删除了，
所以学习的时候，要根据最新的官方文档来，例如：react官方文档 ，一直不知道怎么调成中文的，后来找了这个文档，可惜版本太旧了，但是可以对照着跟官方英文的一起看，下边几个是对应的比较新的文档（最新的只能看英文的，或者百度搜索别人的文章来了解）

• React 入门教程
• React Router 中文文档
• Redux 中文文档
• gulp 资料收集

问题1. gulp环境配置不了，npm 安装总报错

我一开始也遇到这个问题，然后查了一些文章，发现是 node 版本的问题，之前的版本是 0.1...（具体的忘记了），目前升级到 v6.8.0，具体原因 看这里，如果还是安装不了 有可能是被墙了，建议安装国内的 cnpm
参考这里

node 升级 ：Mac 看这里 Windows 直接到官网下载安装最新版本

问题2. this.getDOMNode() 报错

React 在0.14版本之后，将React，拆分成 react 和 react-dom 两个库，上边的这个方法就被取消了，要实现同样的功能需要使用，ReactDOM.findDOMNode(this.refs.text)，类似的问题还有很多，参考最新的文档就能避免出错

问题3. 有关bind(this) 的问题

使用 createClass 创建组件不使用ES6语法是可以不写bind(this)的，但是如果使用ES6，就可能报错(在绑定的函数中找不到this),推荐这篇文章react系列-bind this，所以还是加上 bind(this)

2.其他问题

1.运行gulp的时候，在一个task没执行完的时候就执行其他的task任务了，导致需要刷新好几遍，修改才会显示出来

遇到这种问题的原因，就是官方的文档看的不够仔细，（我也出过错），解决的办法就是return

gulp.task('concat',['sass'], function () {
    return gulp.src(["app/css/index.css","app/css/appcom.css","app/css/*.css"])
      .pipe(concat('app.css'))
      .pipe(gulp.dest('./test/css'))
      .pipe(browserSync.stream());
});

注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。,以上是官网的原话，更多详细信息看这里

2.运行压缩命令，打包后，在命令行没有问题，但是在Chrome控制台上报如下错误

bundle.js:3 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

bundle.js:18 You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

原因是引入的React没有切换到产品版本，按照提示安装了loose-envify等相关插件，还是不好使，最后找到了这个办法：在 package.json 文件中，配置一下 scripts，加上NODE_ENV='production'，转换成生产环境

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "NODE_ENV='development' gulp",
    "run": "NODE_ENV='production' gulp run",
    "master": "NODE_ENV='production' gulp master",
    "build": "NODE_ENV='production' gulp build"
  },

然后又在Windows下用了一下，结果不好使，查了一下资料，发现Windows不支持这种写法，最后安装了一个插件npm install cross-env --save-dev,然后，将scripts中的zNODE_ENV='production'前加上cross-env，这样就能在 Mac 和 Windows 同样的功能

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp": "cross-env NODE_ENV='development' gulp",
    "run": "cross-env NODE_ENV='production' gulp run",
    "master": "cross-env NODE_ENV='production' gulp master",
    "build": "cross-env NODE_ENV='production' gulp build"
  },

注：webpack 相关的解决办法可以看这篇文章webpack + react 优化：缩小js包体积,里边有讲到这个问题

3.给原生的html标签设置自定义属性 报错如下

Warning: Unknown prop `index` on <p> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

意思是说，不能这样设置自定义属性，需要遵守 HTML5 的标准 使用 data-* 来设置<p data-index="1">{this.state.num}</p>,然后通过[元素].dataset.index获取属性值

4.jshint配置好后，对一些ES6 语法还是不支持

jshint 虽然可以针对ES6 进行一些配置，但是，还是有BUG，例如

let initialState = {
  num : 0
};
export default function addReducer(state=initialState, action) {
    switch (action.type) {
        case "ADD_ITEM":
            return state;
        default:
            return state;
    }
}

这种 ES6 的函数参数设置默认值的方法会被jshint报错

Regular parameters should not come after default parameters.

然后我又做了一些测试，发现

let obj = {aa : 0,bb : 1};
    let {aa=100,bb} = obj;
    console.log('aa'+aa); //aa 0
    console.log('bb'+bb); //bb 1
let arr = [111];
    let [aa,bb=100] = arr;
    console.log('aa'+aa); //aa 111
    console.log('bb'+bb); //bb 100

jshint都会报错，网上找了很多资料，找了一个折中的办法，屏蔽错误，就是加上 /* jshint ignore:start */ 和 /* jshint ignore:end */，如果是函数参数设置默认值只要加上/* jshint -W138 */，用起来还挺麻烦，听说 EsLint 语法检查更合适，下一次会试一下。