React函数调用方式，以及坑

React函数调用方式，以及坑

结构学AI关注

0.1822017.03.15 11:45:50字数 160阅读 9,950

好吧这篇文章没想到看得人这么多....出乎意料，mark下，改天写篇原理吧，另外下面是去年在鹅厂的写法，后面鹅厂就不能用react了...
急用的看最后两个就好了，其他情况没啥营养的，就是试错

情况一：

constructor(props) {
    super(props);
    this.login = this.login.bind(this);
}

login(a,b,c) {
    console.log(this);//打印这个组件本身
    console.log(a);//打印111111
    console.log(b);//undefined
    console.log(c);//undefined
}
<button onClick={()=>{this.login(111111)}} />

情况二：

constructor(props) {
    super(props);
    this.login = this.login.bind(this);
}

login(a,b,c) {
    console.log(this);//打印这个组件本身
    console.log(a);//打印Proxy对象：Proxy里面可以获得dom元素
    console.log(b);//打印event
    console.log(c);//undefined
}
<button onClick={this.login} />

情况三：

constructor(props) {
    super(props);
    // this.login = this.login.bind(this);
}

login(a,b,c) {
    console.log(this);//打印这个组件本身，说明我们用箭头函数的时候，不需要bind(this),react自动把this指向了组件自己，
    console.log(a);//打印出了111111
    console.log(b);//undefined
    console.log(c);//undefined
}
<button onClick={()=>{this.login(111111)}} />

情况四：

constructor(props) {
    super(props);
    // this.login = this.login.bind(this);
}

login(a,b,c) {
    console.log(this);//打印null,这是react最常见的坑，this本来指向window，但是经过react初始化之后，指向了null;
    console.log(a);//打印Proxy对象：Proxy里面可以获得dom元素
    console.log(b);//打印event
    console.log(c);
}
<button onClick={this.login} />

情况五：

constructor(props) {
    super(props);
    // this.login = this.login.bind(this);
}

login(a,b,c) {
    console.log(this);//打印这个组件本身
    console.log(a);//undefined
    console.log(b);//undefined
    console.log(c);//undefined
}
<button onClick={()=>{this.login()}} />

情况六：(可以算作es5的最佳实践，用的es5的方法，拿到所有参数)

constructor(props) {
    super(props);
    // this.login = this.login.bind(this);
    this.login=(a,b,c)=>{
        console.log(this);//打印这个组件本身
        console.log(a);//111111
        console.log(b);//打印Proxy对象：Proxy里面可以获得dom元素
        console.log(c);//打印event：
    }
}
<button onClick={this.login.bind(this,111111)} />

最佳实践：(for es6) 老版本

constructor(props) {
    super(props);
    // this.login = this.login.bind(this);
}

login(type,event,proxy) {
    console.log(this);//打印这个组件本身
    console.log(event);//打印event：
    console.log(proxy);//打印Proxy对象,event详情请查验es6

}
<button onClick={()=>{let target=this, handler={};this.login('boss',event,new Proxy(target, handler))}}/>

最佳实践：2018（需要传参）

constructor(props) {
    super(props);
}

login=(num, evt)=>{
    console.log(num);//打印传参
    console.log(evt);//打印event：
}
<button onChange={this.login.bind(null, 111)}/>

最佳实践：2018（不需要传参）

constructor(props) {
    super(props);
}

login=( evt)=>{
    console.log(evt);//打印event：
}
<button onChange={this.login}/>