标签: ecmascript-next

我刚接触使用带有React的ES6类,之前我已经将我的方法绑定到当前对象(在第一个示例中显示),但ES6是否允许我使用箭头将类函数永久绑定到类实例？(当作为回调函数传递时很有用.)当我尝试使用它时,我遇到错误,就像使用CoffeeScript一样:

class SomeClass extends React.Component {

  // Instead of this
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  // Can I somehow do this? Am i just getting the syntax wrong?
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }

因此,如果我要传递SomeClass.handleInputChange给setTimeout它,那么它将被限定为类实例,而不是window对象.

如何编写一个函数,在ES6中以最紧凑的方式只占用少量属性？

我已经提出了使用解构+简化对象文字的解决方案,但我不喜欢在代码中重复的字段列表.

有更薄的解决方案吗？

(v) => {
    let { id, title } = v;
    return { id, title };
}

如您所知,有一个.bind()功能快捷方式的建议,所以您可以写:

::this.handleStuff

它将在es5中像那样工作:

this.handleStuff.bind(this)

我的问题是:这样可以传递参数吗？

我的意思是用上述快捷方式编写这个方法:

this.handleStuff.bind(this, 'stuff')

这在React中是一个非常常见的模式,所以稍微缩短它会很好.

我读到由async关键字标记的异步函数隐式返回一个promise:

async function getVal(){
 return await doSomethingAync();
}

var ret = getVal();
console.log(ret);

但这不是连贯的...假设doSomethingAsync()返回一个promise,而await关键字将返回promise中的值,而不是promise itsef,那么我的getVal函数应返回该值,而不是隐式promise.

那究竟是什么情况呢？由async关键字标记的函数是否隐式返回promises,还是我们控制它们返回的内容？

也许如果我们没有明确地回报某些东西,那么它们会隐含地回报一个承诺......？

更清楚的是,上述和之间存在差异

function doSomethingAync(charlie) {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve(charlie || 'yikes');
        }, 100);
    })
}

async function getVal(){
   var val = await doSomethingAync();  // val is not a promise
   console.log(val); // logs 'yikes' or whatever
   return val;  // but this returns a promise
}

var ret = getVal();
console.log(ret);  //logs a promise

在我的概要中,行为确实与传统的return语句不一致.看来,当您从 …

我刚读这篇精彩的文章 -

https://www.promisejs.org/generators/

它清楚地突出了这个函数,它是一个处理生成器函数的辅助函数:

function async(makeGenerator){
  return function () {
    var generator = makeGenerator.apply(this, arguments);

    function handle(result){
      // result => { done: [Boolean], value: [Object] }
      if (result.done) return Promise.resolve(result.value);

      return Promise.resolve(result.value).then(function (res){
        return handle(generator.next(res));
      }, function (err){
        return handle(generator.throw(err));
      });
    }

    try {
      return handle(generator.next());
    } catch (ex) {
      return Promise.reject(ex);
    }
  }
}

我假设或多或少是async关键字的实现方式async.所以问题是,如果是这种情况,那么async关键字和await关键字之间的区别是什么呢？是否await总是把东西放到一个承诺,而yield没有这样的保证？这是我最好的猜测!

你还可以看到async/await与本文中的生成器的yield相似,他描述了'spawn'函数:https://jakearchibald.com/2014/es7-async-functions/

我必须将一个函数传递给另一个函数,并将其作为回调执行.问题是有时这个函数是异步的,比如:

async function() {
 // Some async actions
}

所以我想执行await callback()或callback()取决于它接收的函数类型.

有没有办法知道函数的类型？

Error: Missing class properties transform

Test.js:

export class Test extends Component {
  constructor (props) {
    super(props)
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

.babelrc:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-class-properties"]
}

package.json:

"babel-core": "^6.5.1",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.2",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.5.2",

我已经浏览了网页并且所有修复都围绕着:升级到babel6,将"stage-0"的顺序切换为"es2015"之后.我所做的一切.

有一个引入C#风格的建议async-await.我知道Babel.js将ES6转换为ES5,但有没有办法让它变得异步 - 等待到ES5？

我正在查看一些ES6代码,我不明白@符号放在变量前面时的作用.我能找到最接近的东西与私人田地有关？

代码我从redux库中查看:

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'redux/react';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/CounterActions';

@connect(state => ({
  counter: state.counter
}))
export default class CounterApp extends Component {
  render() {
    const { counter, dispatch } = this.props;
    return (
      <Counter counter={counter}
               {...bindActionCreators(CounterActions, dispatch)} />
    );
  }
}

这是我发现的关于这个主题的博客文章:https://github.com/zenparsing/es-private-fields

在这个博客文章中,所有示例都在一个类的上下文中 - 在模块中使用符号时它意味着什么？

根据这个 babel文档,使用ES6 +与React的正确方法是初始组件,如下所示:

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

但是一些官方的例子,比如Dan Abramov自己的React DnD模块,使用ES6 +,但仍然在构造函数中定义状态:

constructor(props) {
    super(props);
    this.moveCard = this.moveCard.bind(this);
    this.state = {
       // state stuff
    }
}

现在,作为React的重要贡献者的Dan Abramov可能知道他可以在构造函数之外定义状态,但仍然选择在构造函数中执行它.

所以我只是想知道哪种方式更好,为什么？