フックを使用する

15074 ワード

reactnative useeffect react tutorial テキストリンク

🔖 目次

The Task

Setup

Adding the useEffect hook

Structure of the useEffect hook

The dependency array

Example with dependencies and cleanup

それで、チュートリアルのこのセクションはUSEffectフックについて話します.それが何であるか、それがどのように動作し、どのように公正な既存の3クラスの関数と比較して反応によって使用される.

❗ Just for your Information

私はあまりにも多くの詳細に入ることはありません、私はそれが意味をなすだろうポイントにこの簡潔を維持するつもりですが、私はあなたがこのチュートリアルを終えた後にそれを示唆しています.より深い理解のために下記のリンクを読んでください特に反応の作成者ダンAbraovによる説明.
ここに少し読書があるが、裸です.

どのような効果フックですか？

UseEffectフックは、反応のクラスベースのライフサイクル関数のうちの3つの代わりです.

componentDidMount

componentDidUpdate

componentWillUnmount

反応16.8と反応のネイティブ0.59のように、有効なフックは、よりきれいで簡潔な観察で、1つの一つの機能にこれらの機能のすべての3を結合します.
3つの以前の関数と同様に、データ取得やサブスクリプションなどの副作用を行います.

Note how I said "hook(s)" with an s.

そうですね.あなたの機能コンポーネントは、コード内のさまざまなアクションを処理するために複数の有用なフックを持つことができます.🎉🎉

では、これはどのように働くつもりですか？

まず最初に、私たちが役に立つ効果フックを示すために使用するタスクを説明するつもりです.それから、私たちはuseeffectフックとその構造を通って行きます、そして、我々は最初に、それがどのように働くかについて理解するように、最初にコンポーネントをクラス構成要素に書きます.そして最後に、通常のクラスの関数と比較して、それを使用することの長所と短所について話します.
それで、始めましょう.

仕事

We'll keep it simple. Sweet. Like Music 🎵

We're simply going to use the site JSON placeholder 私たちのためにいくつかのランダムなポスト(コメント、username等)データを生成するために、我々は最初にクラスLifeCycle機能を使用して、それを我々のコンポーネントにそれを引っ張ります.
この後.私たちは別のユースケースを示すつもりです、そこで、我々はイベント位置リスナーを我々のコンポーネントに付けて、スクロール位置をモニターします.これは、我々が少しより良い依存関係を理解するのを助けます.

書き始めましょう。

We'll start by laying down the foundation for our component. So we'll use our App.js file which comes by default in create-react-app

ちょうどあなたのアプリを確認します.jsファイルはこのようになります.

React from 'react'

class App extends React.Component{
    render(){
        return <div></div>
    }
}

export default App;

すべてのポストを保持するように、状態変数を使用しましょう.

  React from 'react'

  class App extends React.Component{
+    constructor(){
+        this.state = {
+            posts = []
+        }
+    }

     render(){
        return <div></div>
     }
  }

  export default App;

では、JSONプレースホルダからデータを取得します.

React from 'react'

class App extends React.Component{
    constructor(){
        this.state = {
            posts = []
        }
    }
+
+   componentDidMount(){
+       fetch("https://jsonplaceholder.typicode.com/posts")
+           .then((response) => response.json())
+           .then((data)=>this.setState({posts: data})
+   )}
+
    render(){
-     return <div></div>
+     return( 
+         <div>
+          {posts.map((p)=>{
+             return (
+                  <div key={p.id}>
+                    <h1>{p.title}</h1>
+                    <h4>{p.subtitle}</h4>
+                  </div>
+              )
+          })}
+          </div>
+     )
   }
}

export default App;

これまでのところ正常な井戸..これは、あなたが「プレフック」時代にそれを書く方法です.
これで、フロントエンドから正常にデータを取得できるはずです.

今すぐ変更を開始することができます

So lets start by changing up the component and it's state to a hook based state like the previous tutorial

import React, {useState} from 'react'

function App(){
  const [posts, setPosts] = useState([]);

  return(
    <div></div>
  )
}

次に、有効なフックを紹介します。

前に述べたように、useeffectフック.3重要な部分があります.この短い例は1部だけを使用します.この場合、すべての投稿に対するフェッチ要求です.
それで、それを加えましょう.

+ // Import useEffect
 import React, {useState, useEffect} from 'react'

  function App(){
    const [posts, setPosts] = useState([]);

   //Add the useEffect.
+   useEffect(()=>{
+      fetch("https://jsonplaceholder.typicode.com/posts")
+        .then((response) => response.json())
+        .then((data)=> setPosts(data));
+   },[]);

    return (
-     <div></div>
-   );
+   return(
+     <div>
+       {/* Render Posts */}
+       {posts.map((p)=>(
+           <div>
+             <h1>{p.title}</h1>
+             <h4>{p.subtitle}</h4>
+           </div>
+       )}
+     </div>
+   )
+ }

✨And thats it !!✨

So let see what we exactly did with the component.

The useState hook is similar to what we did in the previous tutorial.

The useEffect is the new part here for us.

Let's see how it works.

構造

コールバック関数(別の関数への引数として渡される関数)は、useEffectフックの最初の引数です。

この関数の内側に、副作用、データ取得、購読、リスナーを定義します.コンポーネントのレンダリングがフック内で実行されているコードによってブロックされないように、コンポーネントのレンダリング後に実行されます.
そこで説明するほど大したことはない
我々が注目すべきことは第2の議論である

依存配列😵

heckは依存配列ですか?聞いてください.
名前としての依存配列は、基本的にあなたのコンポーネントが変更のために「見ている」変数のリストです.
依存配列の変数が変更されると、コンポーネントはコンポーネントコンポーネントのスナップショット(一時コピー)を保存し、使用するコールバック関数を呼び出します.
依存配列は省略可能な引数であり、省略することができますが、多くの依存関係変数を含めることもできます.しかし、それについてスマートである.
ただし、依存配列は省略可能です.それを残して関数コールの無限ループが発生します.
それを試してみて、あなたの関数にこのuseeffectをコピーし、それを実行して何が起こるかを見てください.

useEffect(()=>{
    console.log("Hello");
});

あなたがコンソールでそれに気づくでしょう.あなたは無限ループを引き起こすことになります.これは本当に私はあなたに読んでほしいという理由です混乱this article 私が同様にチュートリアルの終わりにリストしたダンAbramovによって.
クール.それで結構です.ではなぜ私たちのexample above 空の配列がありますか?(スニペットは以下の通りです)

useEffect(()=>{
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data)=> setPosts(data))
},[]);

まあ、単に置く.空の依存関係の配列を提供することは、この特定のUseEffectフックだけを我々のコンポーネントの最初の表示に関して走らせるように反応を指示します.これは、コンポーネントが基本的にDOMcomponentDidMount 関数.

じゃあ、どうやってUIを有効に使うの？

Since you hopefully understood how the useEffect works theoretically. I'll show you the second example I mentioned here
UIのスクロール位置を監視するコンポーネントを作成します.
また、uffEffectフックの「クリーンアップ」部分を通過します.

import React, {useEffect, useState} from 'react';

function ScrollWatcher(){

    const [offsetValue, setOffsetValue] = useState(0);

    useEffect(()=>{
        window.onScroll = function(){
          setOffsetValue(window.pageYOffset);
       }

       return ()=>{
           window.onScroll = null;
       }
    }, [window.pageYOffset]);

    return (
       <div style={{height: "1000vh"}}> 
           {offsetValue} 
        </div>
    )

}

それで、ちょうど我々がここでしたことを記述するために.
コンポーネントがマウントされると、ウィンドウスクロールイベントにリスナーを追加し、状態を更新するために、有効なフックを指示します.
ここで興味のポイントは再びです.

依存配列

戻り関数

依存配列はウィンドウがあります.PageYoffset変数が追加されました.これが意味するのは、いつでもその窓です.PageYoffset値の変更.有効なフックは再起動し、offsetValue状態変数を更新します.
ここでの返り値は、コンポーネントのアンマウント時に行われるアクションです.これが我々が「クリーンアップ」機能と呼ぶ理由です.これは、コンポーネントまたはその変数に接続されているすべてのサブスクリプションまたはリスナーを削除する場所です.
そして、それ.それは多くの説明ではありませんでしたが、うまくいけば、あなたはそれの要点を得ました.いくつかの記事を提案する前に、いくつかの最後のヒントだけでは間違いなく見てください.