React Nativeでthisが踏んだ穴について

2106 ワード

最近のプロジェクトでは、reactnativeの開発が要求されていますが、初心者の私にとっては、多くの奇妙な問題に遭遇しました.今日は初めてのピットが、関数を呼び出すときにthisをバインドするという迷いに出会いました.reactnativeを使う過程で、いくつかの関数的なプログラミングの魅力を感じました.関数を別の関数のパラメータとして使用します.reactで関数を使う時、いつもbind(this)を必要とします.時にはbindを忘れてしまいました.吼えると、画面全体の真っ赤な色が頭に触ることができないミスを伴って現れます.そして、すべてが悲しみに見えます.はい、これから皆さんと一緒にthisを結び付けて使う3つの方法を紹介します.
まず、thisとは何の鬼かを説明します.「thisとは、thisの針を含む上位のオブジェクトのことです」(まだよく理解していないならgoogle!)
方法1constructor(props)では、すべての定義された方法を一度にまとめて、このようにして、
constructor(props) {
        super(props);

        this.state = {
            user: undefined,
            data: undefined,
            dataSource: new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }),
            expanded: false,
            order: 1,
            page: 1,
            isFollowing: false,
        };
        this.sortBtnPressed = this.sortBtnPressed.bind(this);
        this.becomeCreatorBtnPressed = this.becomeCreatorBtnPressed.bind(this);
        this.nextPage = this.nextPage.bind(this);
        this.sortOptionPressed = this.sortOptionPressed.bind(this);
        this.followBtnPressed = this.followBtnPressed.bind(this);
    }
特に面倒くさそうで、太っていて木があって、もちろんあなたもすべての関数のために循環してthisを結び付ける方法を書くことができます.
方法2
呼び出し方法が必要な場合は、thisをバインドします.
  
このようなやり方もあまり勧められません.至るところにthisが結合されていて、見た目があまりよくないです.
方法3
ES 6矢印関数を使った書き方は便利で綺麗です.
requestData = () => {
        const nextIndex = this.state.pageIndex + 1;
        this.setState({
            pageIndex: nextIndex,
        });
        NativeModules.LivePlayerListModule.requestLivePlayerList(
            nextIndex,
            (data) => {
                this.updateDataSource(data);
            }
        );
    }
矢印関数には独自のthis値がありません.矢印関数内のthis値は外周作用領域から継承されます.だから、私たちは関数を呼び出す時には、安心して大胆に呼び出すことができます.心配しなくてもいいです.
問題を書いていますが、まだよく分かりませんので、本は不定期的に更新されます.もし読んでいるうちに何か間違いがあったら、ご指摘ください.