初めてのReactNativeメモ① ざっとお勉強する

基本中の基本

• ファイルを読み込む 「import」

ディレクトリ内にインストールして、ファイルに読み込んで使います。

　import React from 'react';

色々なとこでよく見る「constructor」 

コンストラクタ (constructor)とは

オブジェクト指向のプログラミング言語で登場する用語のひとつでインスタンスを作成したタイミングで実行されるメソッドのことです。

　constructor(props){
　super(props);
　this.state ={ isLoading: true}
　 }

使ってみればわかるが説明すると難しいものです。

ライフサイクルメソッド

コンポーネント

ReactではUIを構成する要素のことをコンポーネント(Component)と呼びます。具体的にはボタンやヘッダー、コンテナなどのことです。Reactで開発する利点としてはそれらのUIパーツをそれぞれ細かくコンポーネントに分けておくことで、再描画が必要なものだけに更新を走らせてパフォーマンスをチューニングできる点が挙げられます。
React(v16.4) コンポーネントライフサイクルメソッドまとめ - Qiita

コンポーネントの状態の変化(ライフサイクル)により発火する様々なライフサイクルメソッドが用意されており、コンポーネントの状態に応じて色々な操作ができるようになっています。

Reactのライフサイクル – React入門 - to-R Media

componentDidMount()

ComponentがDOM*1ツリーに追加された状態で呼ばれるのでDOMに関わる初期化処理を行いたい時に便利です。
componentWillMountと違いserver-side renderingの時には呼ばれません。

DOMを扱う処理のほか、AjaxリクエストやsetIntervalの登録などのserver-side rendering時には必要ない初期化処理についてはこの中でやることになります。

React.jsのComponent Lifecycle - Qiita

コンポーネントがマウント(配置)された直前に呼び出されるメソッド。

以下のように指定することで状態変化に応じた処理を行うことができます。
このメソッド内では描画されたDOMにアクセスすることができます。

Reactのライフサイクル – React入門 - to-R Media

Fetch API fetch('')

fetch()メソッド

fetch()メソッドでは、JSONで様々なオプションを渡すことで、HTTPリクエストを柔軟にカスタマイズできるのが大きな特徴です。JSONで一度に指定できるのでXHRよりも扱い方が楽になっています。

お疲れさまXMLHttpRequest、こんにちはfetch - Qiita

componentDidMount(){
return fetch('https://facebook.github.io/react-native/movies.json')
 .then(response) => response.json()
 
 .then(responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.movies,
}, function(){
};

 })
 .catch((error) =>{
console.error(error);
 });
 }

responce

 .then((response) => response.json())

Fetch API の Response インターフェイスは、リクエストのレスポンスを表します。

Response.Response() コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の Fetchevent.respondWith や GlobalFetch.fetch() などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。

Response - Web API | MDN

response() => json()

.json ファイルを取得します。

取得したら、isLoadingをtrueにする。

setState

this.setState({
isLoading: false,
dataSource: responseJson.movies,
 }, function(){

 });

Stateを更新する。コンストラクタの初期値の

constructor(props){
super(props);
this.state ={ isLoading: true}
 }

this.state ={isLoading: true}を{isLoading: false}に変更する。

super()メソッド

なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ - Qiita

 .catch((error) =>{
console.error(error);
 });||<

*1:DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと