zoukankan      html  css  js  c++  java
  • react 15

    react 15

    最近项目由react0.14.X升级到react 15版本,因为react15还是做了一些相对大一点的更新的(详情可以参考一下我的另一篇文章关于react15的一点总结),相对;来说react升级之后但react问题并不太多。但是react相应的配置,例如babel,react-hot-loader等相也做了一些升级。放到一起来说问题还是多一点的。这里把遇到的一些问题和注意点拿出来给大家分享一下,能避免的坑还是要尽量绕开的不是。

      一、首先react15的包分成了react和react-dom两部分分别打包,所以用到react-dom的地方,导入的位置就要换掉了。如下面图示:

      二、react,babel是环环相扣的。升级了react之后升级babel是在所难免的过程了,

    注意升级的顺序,babel->babel-*其他相关项->babel-core。原有相关依赖项不先行升级的话对babel-core的是有版本要求的,会导致升级失败。

      三、升级babel之后,原有babel5的写法已经被废弃,所以会报错:

        ReferenceError: [BABEL] XXXX.jsx: Unknown option: stage(或loose)

    babel6只支持presets和plugins两个属性了。babel 最新版本babel6的相关配置解析可以看下这篇文章。此外,如果少引用了某个插件。会有类似下面的报错:

        Module build failed: SyntaxError: index.js: Unexpected token 

     四、
    如果你用到了react-hot-loader实现热加载的话,会遇见下面的错误: 
    Cannot resolve module 'react/lib/ReactMount'
    switch to react-hot-loader 3.x!

    刚才提到的相应配置也要升级,这是比较麻烦的一点。所以react-hot-loader要升级到3.X,不过我发现npm上最新的版本竟然也是beta版,希望不会有其他变动。

      五、仅仅是把react-hot-loader升级到3.X还不算完,升级完之后react-hot-loader的用法也要有相应改变。此时会有下面的错误:

      不能像原来一样在webpack中直接加载react-hot-loader:

      需要从webpack中移除react-hot loader。.barbelrc中增加plugins属性:react-hot-loader/babel。此处问题比较多,大致应该装以下预设和插件(babel 最新版本babel6的相关配置解析可以看下这篇文章,更好理解):

        

      六、上面说到的相关配置还有一个,如果你用到react-router的话。同样需要升级到3.X版本,如果是1.X的版本的写法也需要做些改变,当遇到下面的错误时:

      

    根据hash匹配的路由,不需要自己创建hsitory对象,直接导入react-router 3.X 现有的hashHistory对象即可。

      七、react15官方文档中提到,增加了比较人性化的报警和错误信息。但是个人认为有点矫枉过正的感觉,下面的warning是肯定会看到的:

    官方解释:You are using a non-standard DOM attribute, perhaps to represent custom data. Custom data attributes should always have a data- prefix, as described in https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

    也就是说,如果不是dom元素原生的属性的话,必须要带上data-,否则认为是unknown的,就会报警。但是个人认为现在提这个所谓的规范有点为时已晚,因为大型的项目都已经比较成熟了,如果为了这个标准再去修改相应的内容,大部分人应该是不情愿的,有种矫枉过正的感觉。考虑到大家的反馈,react开发小组的成员已经妥协了,未来的版本会去掉这种校验。In future versions of React we plan to pass such props “through” without the whitelist。

      八,建议避免bind来绑定this,可以用箭头函数来替换。不然babel转译的时候会有报错的情况。

      以上就是本次项目升级过程中暂时碰到一些问题,做个总结为后面的同学做个参考。对于还没有升级的项目,个人建议暂时不要升级了,毕竟有些配置还是非稳定版本,等稳定了再动。这次升级我只是在备用分支上做了操作,目前来看还是比较明智的。在升级的过程中有好多问题,搜索引擎是不给力的,还是需要自己摸索的,所以感觉有必要总结一下给后来者一个参考,共同学习提高。

  • 相关阅读:
    LeetCode 811. Subdomain Visit Count (子域名访问计数)
    LeetCode 884. Uncommon Words from Two Sentences (两句话中的不常见单词)
    LeetCode 939. Minimum Area Rectangle (最小面积矩形)
    LeetCode 781. Rabbits in Forest (森林中的兔子)
    LeetCode 739. Daily Temperatures (每日温度)
    三种方式实现按钮的点击事件
    239. Sliding Window Maximum
    14.TCP的坚持定时器和保活定时器
    13.TCP的超时与重传
    12.TCP的成块数据流
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/6111553.html
Copyright © 2011-2022 走看看