内容

Introduction

What arguments are passed to useEffect hook?

First argument to useEffect

Return value of effect

Second argument to useEffect

Passing a function as a dependency

References

これは私の反応フックシリーズの3番目のポストです.最初の2つを見ていない場合は、以下のリンクを見てください.

UseEffectフック入門

フックは、ES 6クラスを書くことなく、あなたが状態と他の反応特徴を使うのを可能にする機能です.useEffect フックは、反応フックAPIの一部です.あなたが反応ライフサイクルに精通しているならば、useEffect フックはライフサイクル法に相当するcomponentDidMount , componentDidUpdate and componentWillUnmount 組み合わせ.実際にはReact documentation on Hooks , useEffect フックはES 6クラスのコンポーネントのライフサイクルメソッドによって提起されたいくつかの課題に対処するために開発されました.このポストはフックがどんな効果を持っているか、そしてそれがどのように使われているかについてです.あなたはそれを見ることができますHere .
反応する機能部品では、我々は実行します side effects APIからデータを取得するか、手動でDOMを内部で更新するようなuseEffect フック.

どのような引数が有効なフックに渡されますか？

useEffect は2つの引数をとる関数です.The first argument passed to useEffect 関数とはeffect (このフックが名前をつけられる理由を推測することができます)useEffect ) そして、2番目の引数(任意である)は依存関係の配列です.以下はそれがどのように使用されるかの説明です.

import React, { useEffect } from "react";
import { render } from "react-dom";
const App = props => {
  useEffect(() => {
    console.log("Effect has been called");
  }); //Second argument to useEffect has been omitted
  return <h1> Hello world! </h1>;
};  
const root = document.getElementById("root");
render(<App />, root);

有効な最初の引数

最初の引数effect , 関数を返す関数cleanup ) or undefined . effect は、コンポーネントがマウントされたときに実行されます(最初のレンダリングで)、その後の更新で実行されるかどうかは、2番目の引数として渡される依存関係の配列によって決まります.

返り値

から Previous section , 我々は最初の引数をuseEffect 関数とはeffect . effect パラメータをとりません、そして、それは機能か未定義のどちらかを返さなければなりません.関数を返すと、cleanup . cleanup はeffect (以前のレンダラからの効果を消去する).あなたがなぜクリーンアップが必要であるかについて興味があるならばReact documentation . 以来effect 関数または未定義のいずれかを返します.effects なしでcleanup .

有効な2番目の引数

2番目の引数useEffect は dependencies . あなたがコントロールしたいならばeffect コンポーネントをマウントした後に実行し、依存関係の配列を2番目の引数として渡すことです.dependencies 値は外部で定義されますかuseEffect しかし、内部で使用されているuseEffect ライク

     function App(){
         const[state, setState] = useState(0);
          // state is defined here
         useEffect(() => {
              console.log(state); 
              //value of state is used here therefore must be passed as a dependency
         }, [state])

     }

Reply依存関係の現在の値と前のレンダリングの値を比較します.同じでなければ、effect が呼び出される.
この引数はオプションです.省略するとeffect は全てのレンダリング後に実行される.欲しいならeffect 最初のレンダリングでのみ実行するには、空の配列を渡すことができます.

     useEffect(() => {
       console.log("Effect has been called");
}, []) // Empty array as dependency, useEffect is invoked once

依存関係は、状態または小道具でありえます.外部で定義された任意の値useEffect しかし、コンポーネント内では、依存して渡す必要がありますuseEffect . これを以下に示す.

  function App(props) {
     const [count, setCount] = React.useState(1);
     // count and setCount are defined inside component(App) but outside useEffect
     useEffect(() => {
       //count is being used inside useEffect. Therefore must be passed as dependency.
       console.log(count);
}, [count])
}

依存性として関数を渡す

あなたは外側の機能を定義するかどうか疑問に思うかもしれないuseEffect を呼び出します.effect , 依存関係として渡す必要がありますか?
例題:

 function App(props){
    const [data, setData] = useState(null);
    const fetchData = () => {
         //fetch some data 
    }
    useEffect(() => {
    fetchData(); //Invoked inside useEffect
}, [fetchData])

}

外部の関数を定義し、内部で呼び出すことは推奨されませんeffect . 上記のケースはfetchData 依存関係が通過したので、あらゆるレンダリングで呼び出されて、関数と機能はオブジェクトです.反応は比較するfetchData 前と現在のレンダリングのために、2つは同じようにそれゆえ、呼び出しをトリガすることはありませんeffect .
によるとReact documentation on useEffect hook ,

It’s difficult to remember which props or state are used by functions outside of the effect. This is why usually you’ll want to declare functions needed by an effect inside of it. Then it’s easy to see what values from the component scope that effect depends on:

You can also move the function inside the effect so that it doesn’t need to be in its dependency list.

これまで読んでくれてありがとう.これは簡単な入門ですuseEffect . たくさんのことがあるuseEffect フックこの記事には触れていません.慣れるのに少し時間がかかる.深く理解したいならuseEffect , 下記の参考文献を見てください.この記事が役に立つなら、それを共有してください.誰かがそれが役に立つも見つけることができます.あなたが技術的に不正確な何かを見つけるならば、下記にコメントしてください.

参考文献

React Hooks FAQ

Hooks API Reference

Complete guide to React