React NativeのReact速学チュートリアル(下)

15589 ワード
React NativeのReact速学チュートリアル(下)
本文は『React Native学習ノート』シリーズの文章から出た.
React NativeはReactに基づいており,React Nativeの開発にはReactに関する知識が欠かせない.公式にもそれなりのDocumentがあるが、紙面が多く、勉強が退屈だ.「React NativeのReact速学チュートリアル」を通じて、Reactに対してより系統的で深い認識を持つことができます.皆さんの勉強を便利にするために、私は『React NativeのReact速学教程』を上、中、下の3編に分けて、皆さんは必要に応じて読書学習を行うことができます.
概要
本編は『React NativeのReact速学教程』の最後の編である.本編では、ES 6を認識し、開発でよく使われるES 6の新しい特性と、ES 6とES 5の違いを学び、React/React Nativeを学ぶ過程でES 6とES 5に対するいくつかの困惑を解決します.
ES 6の特性
ES 6とは?
ES 6全称ECMAScript 6.0、ES 6は2015年6月17日に発表され、ECMAScriptはECMAが制定した標準化スクリプト言語である.現在JavaScriptで使用されているECMAScriptバージョンはECMAScript-262です.
ES 6の新しい特性のうち,我々の開発に大きな影響を及ぼす6つの特性を列挙した.
1.クラス(class)
Java、object-c、c#などの純粋なオブジェクト向け言語に詳しい開発者にとって、classには特別な気持ちがあります.ES 6はclass(クラス)を導入し,JavaScriptのオブジェクト向けプログラミングをより簡単かつ容易に理解できるようにした.
  class Animal {
    //     ，           ，     ，                 .
    constructor(name,color) {
      this.name = name;
      this.color = color;
    }
    // toString          
    toString() {
      console.log('name:' + this.name + ',color:' + this.color);

    }
  }
   
 var animal = new Animal('dog','white');//   Animal
 animal.toString();

 console.log(animal.hasOwnProperty('name')); //true
 console.log(animal.hasOwnProperty('toString')); // false
 console.log(animal.__proto__.hasOwnProperty('toString')); // true

 class Cat extends Animal {
  constructor(action) {
    //       constructor   super   ，             .
    //       consructor,   super   constructor     、
    super('cat','white');
    this.action = action;
  }
  toString() {
    console.log(super.toString());
  }
 }

 var cat = new Cat('catch')
 cat.toString();
 
 //   cat   Cat   Animal    ， Es5    。
 console.log(cat instanceof Cat); // true
 console.log(cat instanceof Animal); // true

2.モジュール(Module)
ES 5はオリジナルのモジュール化をサポートせず、ES 6ではモジュールが重要な構成部分として追加される.モジュールの機能は主にexportとimportから構成されています.各モジュールには独自の役割ドメインがあり、モジュール間の相互呼び出し関係はexportによってモジュールが外部に露出するインタフェースを規定し、importによって他のモジュールが提供するインタフェースを参照する.また、モジュールにネーミングスペースを作成し、関数のネーミング競合を防止します.
エクスポート(export)
ES 6は、1つのモジュールでexportを使用して複数の変数またはメソッドをエクスポートすることを可能にする.
変数のエクスポート
//test.js
export var name = 'Rainbow'

心得:ES 6は変数のエクスポートだけでなく、定数のエクスポートもサポートします.export const sqrt = Math.sqrt;//
ES 6は、ファイルをモジュールと見なし、上のモジュールはexportを介して変数を外部に出力します.1つのモジュールは、複数の変数を同時に外部に出力することもできます.
 //test.js
 var name = 'Rainbow';
 var age = '24';
 export {name, age};

関数のエクスポート
// myModule.js
export function myModule(someArg) {
  return someArg;
}

インポート(import)
モジュールの出力を定義したら、別のモジュールでimportで参照できます.
import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

心得:import文は、デフォルトメソッドと他の変数を同時にインポートできます.import defaultMethod, { otherMethod } from 'xxx.js';
3.矢印(Arrow)関数
これはES 6の中で最も感動的な特性の一つです.=>はキーワードfunctionの略語だけでなく、他のメリットももたらします.矢印関数は、それを囲むコードと同じthisを共有し、thisの指向問題をよく解決することができます.経験のあるJavaScript開発者は、var self = this;やvar that = thisのような周辺thisを参照するモデルをよく知っています.しかし、=>を借りると、このようなモードは必要ありません.
矢印関数の構造
矢印関数の矢印=>は、前は空カッコ、単一のパラメータ名、またはカッコで囲まれた複数のパラメータ名であり、矢印の後は式(関数の戻り値として)、またはカッコで囲まれた関数体(returnで値を返す必要があります.そうしないとundefinedを返します).
//        
()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

心得:矢印関数でもbindでも、実行されるたびに新しい関数参照が返されます.そのため、関数の参照が必要な場合(例えば、リスナーをアンインストールするなど)、自分でこの参照を保存する必要があります.
Listenerをアンインストールするときのトラップ
誤ったやり方
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused.bind(this));
    }
    onAppPaused(event){
    }
}

正しいやり方
class PauseMenu extends React.Component{
    constructor(props){
        super(props);
        this._onAppPaused = this.onAppPaused.bind(this);
    }
    componentWillMount(){
        AppStateIOS.addEventListener('change', this._onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}

上記の方法に加えて、私たちはこのようにすることができます.
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentWillUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //         arrow function      ，           this  
    }
}

bind関数でも矢印関数でも、実行されるたびに新しい関数参照が返されます.そのため、関数の参照が必要な場合(例えば、リスナーをアンインストールするなど)、自分でこの参照を保存する必要があります.
4.ES 6はMixinsをサポートしない
ES 5では、mixinを使用して、次のようなコンポーネントに新しい方法を追加することがよくあります.
var SetIntervalMixin = {
  componentWillMount: function() {
    this.intervals = [];
  },
  setInterval: function() {
    this.intervals.push(setInterval.apply(null, arguments));
  },
  componentWillUnmount: function() {
    this.intervals.forEach(clearInterval);
  }
};
var TickTock = React.createClass({
  mixins: [SetIntervalMixin], // Use the mixin
  getInitialState: function() {
    return {seconds: 0};
  },
  ...

しかし、残念なことに、ES 6はMixinsの使用をサポートしていませんが、Mixinsの代わりに強化コンポーネントを使用することができます.
//Enhance.js
import { Component } from "React";

export var Enhance = ComposedComponent => class extends Component {
    constructor() {
        this.state = { data: null };
    }
    componentDidMount() {
        this.setState({ data: 'Hello' });
    }
    render() {
        return ;
    }
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";

class MyComponent {
    render() {
        if (!this.data) return 
Waiting...
;
        return 
{this.data}
;
    }
}

export default Enhance(MyComponent); // Enhanced component

「拡張コンポーネント」を使用して、クラスにいくつかのメソッドを追加し、mixinが実装するほとんどの要件を実現できることは間違いありません.
また、react-mixinなど、ネット上にも他の案がたくさんあります.
5.ES 6は自動バインドされなくなった
ES 5ではReact.createClassはすべての方法をbindして、任意の場所にコールバック関数として提出することができますが、thisは変わりません.しかし、ES 6には自動バインドがありません.つまり、bindまたは矢印関数でthis参照を手動でバインドする必要があります.
//      bind()    `this`


//              

 this.tick()}>  
 
 
 
  
  ：            bind()                  ，  ，                this。
 
 
 
 
 
  
  
   
 
constructor(props) {
 super(props);
 this.state = {count: props.initialCount};
 this.tick = this.tick.bind(this);//        this}//  

### 6.static   

 ES6       static           。  

```javascript
class People {
    constructor(name) { //    
          this.name = name;
    }
    sayName() {
          console.log(this.name);
    }
    static formatName(name) // formatName      
        return name[0].toUpperCase() + name.sustr(1).toLowerCase();
    }
}

  
console.log(People.formatName("tom")); //     formatName

  
ES 6 VS ES 5(ES 6とES 5の い)
 しいリリースのReact/React NativeではES 6  が  されていますが、ES 6ベースのReact/React NativeがES 5とどのように なるかについて  します.
  : くのReact/React Nativeの   はES 6の  に わされることが い:  にはES 6をお めしますが、ネット で  された くのチュートリアルや はES 5バージョンに づいているので、 がつけられないと じている が いので、ES 6とES 5がReact/React Nativeの  でどのような いがあるのか、  すべき を  に  しましょう.
 は、ES 6とES 5の4つの での いを る  があります.
1.  の   
コンポーネント、メソッド、プロパティの  などでは、ES 6とES 5が なりますが、どのような いがあるかを てみましょう.
  :  き   のため、   にES 6もES 5も  できる  ですが、コードのスタイルの   のために、できるだけミックスを らすことをお めします.
コンポーネントの  
ES5 
ES 5では  Reactを  する.createClassは、 のようにコンポーネントクラスを  します.
var Photo = React.createClass({
    render: function() {
        return (
            
        );
    },
});

  
ES6 
ES 6ではReactを  することでComponentは、 のようにコンポーネントクラスを  します.
class Photo extends React.Component {
    render() {
        return (
            
        );
    }
}

  
メソッドの  
ES 5に べてES 6はメソッド  で  が  であり, の から,コンポーネント  メソッドに  :function()の き ではなく,    ()を い,メソッドの  にカンマを けることはできないことが かる.
ES5 
var Photo = React.createClass({
    test: function(){
    },
    render: function() {
        return (
            
        );
    },
});

  
ES6 
class Photo extends React.Component {
    test() {
    }
    render() {
        return (
            
        );
    }
}

  
コンポーネントの  タイプとデフォルト  の  
ES5 
ES 5では,  タイプとデフォルト  はそれぞれpropTypesメンバーとgetDefaultPropsメソッドによって  される.
var Video = React.createClass({
    getDefaultProps: function() {
        return {
            autoPlay: false,
            maxLoops: 10,
        };
    },
    propTypes: {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    },
    render: function() {
        return (
            
        );
    },
});

  
ES6 
ES 6ではstaticメンバーを  して  できる.
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,
    };  //        
    render() {
        return (
            
        );
    } //               
}

  
  はしませんが、コードを むと  がわかるはずです.
class Video extends React.Component {
    render() {
        return (
            
        );
    }
}
Video.defaultProps = {
    autoPlay: false,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: React.PropTypes.bool.isRequired,
    maxLoops: React.PropTypes.number.isRequired,
    posterFrameSrc: React.PropTypes.string.isRequired,
    videoSrc: React.PropTypes.string.isRequired,
};

  
  :React   にとって、staticは いバージョンのブラウザではサポートされていません.React Native   はこの  を  する  はありません.
2.インポート(import)とエクスポート(export)コンポーネントの い
コンポーネントのインポート
ES5 
ES 5では、CommonJS  を  する  、Reactパッケージの  は   にrequireによって われ、コードはこのように ています.
var React = require("react");
var {
    Component,
    PropTypes
} = React;  //  React    

  
var ReactNative = require("react-native");
var {
    Image,
    Text,
} = ReactNative;  //     React Native  

  
var AboutPage=require('./app/AboutPage') //  app   AboutPage  ， AboutPag.js
var PopularPage=require('./app/PopularPage') //  app   PopularPage  ， PopularPage.js
var FavoritePage=require('./app/FavoritePage') //  app   FavoritePage  ， FavoritePage.js

  
ES6 
ES 6ではrequireではなく、importを ってコンポーネントをインポートしているので、Javaの き に ています.
import React, { 
    Component,
    PropTypes,
} from 'react';//  React    

  
import {
    Image,
    Text
} from 'react-native' //     React Native  

  
import AboutPage from './app/AboutPage' //  app   AboutPage  ， AboutPag.js
import PopularPage from './app/PopularPage' //  app   PopularPage  ， PopularPage.js
import FavoritePage  from './app/FavoritePage' //  app   FavoritePage  ， FavoritePage.js

  
また、ES 6は、コンポーネントを1つのオブジェクトとしてインポートすることをサポートし、「*as」  を  すればよい.
//  app   AboutPage        ，       “AboutPage.”   AboutPage       。  
import  * as AboutPage from './app/AboutPage' 

  
  :「*as」で  すると、インポートしたコンポーネントはそのままインスタンス され、「.」を  できます.  でコンポーネントを び す  や  は、「*as」  がないのとは   に なり、  するときは に  してください.
コンポーネントのエクスポート
ES 5はES 5の で、1つのクラスを のモジュールにエクスポートするために、   にmoduleを じています.exportsでエクスポート:
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;

  
ES 6はES 6で、  export defaultで じ  を  します.
export default class MyComponent extends Component{
    ...
}

  
3.   stateでの  
ES5 
var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

  
ES 6 ES 6では、2つの き があります.
class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

  
しかし、    の   をより  しやすいことをお めします(  に じて  することもできます):
class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

  
4.  がコールバックとして なる
    では,ボタンのクリックコールバックなど,コールバックによく いられるが,これも くのプログラミング  でよく られる  である.ES 6とES 5はコールバックの  に いがある.
ES5 
var PostInfo = React.createClass({
    handleOptionsButtonClick: function(e) {
        // Here, 'this' refers to the component instance.
        this.setState({showOptionsModal: true});
    },
    render: function(){
        return (
            
                {this.props.label}
            
        )
    },
});

  
ES 5ではReact.createClassはすべての  をbindして、  の  にコールバック  として  することができますが、thisは わりません.しかし、  は 、これは に   ではなく、  しにくいと えている.
ES 6ではbindでthis  をバインドするか、    を  します(  のscopeのthis  をバインドします):
ES6 
class PostInfo extends React.Component{
    handleOptionsButtonClick(e){
        this.setState({showOptionsModal: true});
    }
    render(){
        return (
            this.handleOptionsButtonClick(e)}//              
                >
                {this.props.label}
            
        )
    },·
}

  
リファレンス
React's official site  React on ES6+ 
About 
  は『React Native  ノート』シリーズの  から た.もっと しくは、 のGitHub@に  してください.http://jiapenghui.com 
おすすめ  
  •  React Native  ノート
  • [Reac Nativeレイアウト  ガイド](Reac Native Layout Details Guide)https://github.com/crazycodeboy/RNStudyNotes/tree/master/ReactNativeレイアウト/React Nativeレイアウト  ガイド/React Nativeレイアウト  ガイド.md) 
    •   
  •  React Nativeデバッグテクニックと  
  •  React NativeがAPPの  を  APK 
    • をパッケージ 
  •  React Nativeアプリケーションの  、ホット・アップデート-CodePushの    の  
    •
    yagmailメール支援システム(一)
    微信ウィジェットチュートリアルの参照