对react传参的困惑

Question

在看draft-js给的例子，出现了困惑。

平时传参我都是直接

xxx={(ev, arg1, arg2,……) => {this.xxx(ev, arg1, arg2,……)}

官方给出的快速开始例子

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

想知道editorState参数是怎么传给onChange这个函数的？
我试了

this.onChange = (editorState) => {
    var length = arguments.length;
    console.log('change');
    for (var i = 0; i < length; i++) {
        if (arguments[i] == editorState) {
            console.log(i);
        }
    }
    this.setState({editorState})
};

arguments中并没有editorState参数。而如果直接输出是有的

this.onChange = (editorState) => {
    console.log(editorState);
    this.setState({editorState})
};

为什么呢？

Answer 1

箭头函数并不会创建新的 函数作用域, 所以 不会构建新的 this, 不能使用 arguments.

所以,题主写的测试 arguments 实际上不是你想要的 "arguments"

参考中文:
http://es6.ruanyifeng.com/#do...
箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

demo online: http://jsbin.com/yuforakeso/e...
demo:

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo()

Answer 2

_update(editorState: EditorState): void {
    this._latestEditorState = editorState;
    this.props.onChange(editorState);
}

这是Editor组件的一段源码，是这个组件传回来了你所要的参数。

Answer 3

自己总结了下。

把theone1006的函数改造下

function foo () {
  const bar = function bar (arg1) {
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`bar arg1:${arg1}`)
  }
  
  bar('barArg');
  
  const fooArguments = arguments;
  
  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    if(fooArguments === arguments) {
      console.log('Arrow Functions not have arguments');
    }
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');
}

foo('test');

可以发现baz的arguments就是foo的arguments。
如果把baz函数单独提出

  const baz = (arg2) => {
    console.log()
    console.log(`arguments:`);
    console.log(arguments);
    console.log(`baz arg2:${arg2}`)
  }
  
  baz('bazArg');

是会提示arguments is not defined的。

而后我试了

    constructor(props) {
        super(props);
        console.log(arguments);
        this.handleClick = (a, b, c) => {
            console.log(a);
            console.log(b);
            console.log(c);
            console.log('..............');
            console.log(arguments);
        }        
    }
    render() {
        return (
            <div>
                <div onClick={(event) => this.handleClick(event)}>111</div>
            </div>
        );
    }

看出handleClick的arguments就是constructor的arguments。参数a, b, c和arguments不一致。

最后根据chhu1的答案，知道了参数是从哪来的。