React関数呼び出し方式、およびピット

3150 ワード

よし、この文章は意外にも人がこんなに多いとは思わなかった....意外にも、markの下で、日を変えて原理を書きましょう.また、次は去年ガチョウ工場での書き方です.後ろのガチョウ工場ではreactは使えません.急いで最後の2つを見るといいですが、他の状況では栄養がありません.試し間違いです.
ケース1:

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
}

ケース2:

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
}

情况三：

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
}

ケース4:

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);
}

情况五：

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
}

ケース6:(es 5のベストプラクティスとして計算でき、es 5の方法で、すべてのパラメータを得る)

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：
    }
}

最佳实践：(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

}

ベストプラクティス:2018(伝参が必要)

constructor(props) {
    super(props);
}

login=(num, evt)=>{
    console.log(num);//    
    console.log(evt);//  event：
}

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

constructor(props) {
    super(props);
}

login=( evt)=>{
    console.log(evt);//  event：
}

Enumerable.Pairwise

ansibleパラメータ説明