React/React Native 的ES5 ES6写法对照表



  • // 正确的做法
    class PauseMenu extends React.Component{
    componentWillMount(){
    AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentDidUnmount(){
    AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
    //把方法直接作为一个arrow function的属性来定义,初始化的时候就绑定好了this指针
    }
    }

    按这个写法报错啊 箭头函数换成es5的就可以 , 不知道怎么解决 。现在都是在constructor里从新绑定一次


  • administrators

    @ypzhou 报什么错



  • @sunnylqm 0_1468478408530_-562da4cf8415dbf5.png

    就是这个错误 ,在render里使用箭头函数就不会报错


  • administrators

    @ypzhou web上默认的babel配置不支持es7 class properties



  • @sunnylqm 说:

    那要怎么解决啊? 这里的箭头函数用起来很方便的


  • administrators

    @ypzhou 自己了解一下babel的配置吧,我三两句话讲不清楚



  • 解决问题了 加入
    npm install babel-preset-stage-0 --save-dev //支持ES7
    这个配置就可以了



  • mark 一下 嘿嘿



  • onAppPaused = (event) => {
    //把方法直接作为一个arrow function的属性来定义,初始化的时候就绑定好了this指针
    }

    这种方式在浏览器debug窗口会有调试信息错误的问题, 比如鼠标移到this指针显示的信息, 和实际的并不一致.
    可以使用:
    onAppPaused = function (event) {
    // TODO
    }.bind(this)
    来避免上述问题, 又能绑定好this指针



  • 接触React的时候,已经是ES6的写法了,对于ES5的写法反而不熟悉。不过可以用于了解React的历史,如果哪天接触的项目还是基于ES5的不至于一脸懵逼。


登录后回复