生活を楽にする3つのReactフック

Reactフックは、関数コンポーネントのコンテキスト内でコアReact機能へのアクセスを提供します。従来、Reactを最適化するには、開発者は関数コンポーネントとクラスコンポーネントを切り替える必要がありましたが、Reactフックを使用すると、プロジェクト全体で関数コンポーネントを使用して、小規模アプリケーションと大規模アプリケーションの両方を構築できます。

クラスコンポーネントよりも関数コンポーネントを書くのが好きなReact開発者なら、この記事はあなたにぴったりです。あなたは、とそれほど慣れていない可能性があることを我々は役に立つが、まだやや過小評価3がフックに反応を見てみましょうuseImperativeHandleuseLayoutEffectuseDebugValue。それらのユースケース、構文、およびいくつかのコード例について説明します。始めましょう!

ReactuseImperativeHandleフック

Reactでは、データは、単方向データフローと呼ばれる小道具を介して親コンポーネントから子コンポーネントに渡されます。親コンポーネントは、子コンポーネントで定義された関数を直接呼び出すことも、自分自身の値を取得するために手を伸ばすこともできません。

特定の状況では、親コンポーネントが子コンポーネントに到達し、子コンポーネントで発生したデータを取得して独自に使用する必要があります。このタイプのデータフローはuseImperativeHandleフックを使用して実現できます。これにより、子コンポーネント内の値、状態、または関数を、を介して親コンポーネントに公開できますref。親コンポーネントがアクセスできるプロパティを決定することもできます。これにより、子コンポーネントのプライベートスコープが維持されます。

構文

useImperativeHandle(ref, createHandle, [dependencies])
  • ref:親コンポーネントから渡された参照
  • createHandle:親コンポーネントに公開される値
  • dependencies:変更時に​​フックを再実行する値の配列

ユースケース

双方向のデータとロジックフローが必要であるが、状態管理ライブラリを導入して物事を過度に複雑にしたくない場合は、useImperativeHandleフックが最適です。

たとえばuseImperativeHandle、親コンポーネントのボタンがクリックされたときにモーダルコンポーネントを開く必要があるときに、フックを使用したことがあります。

親コンポーネントで状態を定義すると、モーダルボタンがクリックされるたびに親コンポーネントとその子が再レンダリングされるため、子コンポーネントの状態が必要でした。その代わりに、私は、モーダル状態を記憶されているModal使用してコンポーネントuseImperativeHandleforwardRef

以下のコードを検討してください。

import React, { useRef } from 'react';
import Child from './Child';

 const ParentComponent = () => {

    const childRef = useRef(null);

    const handleOpenModal = (value) => {
        childRef.current.openModal(value);
    }


    return (
        <div>
            <p>This is a parent component</p>
            <Child ref={childRef}/>

            <button onClick={() => handleOpenModal(true)}>Open modal</button>
        </div>
    )

}

export default ParentComponent;

上記でref、子コンポーネントに渡したを定義しました。以下のコードでは、が子コンポーネントでref渡される最初のパラメーターuseImperativeHandleになります。

また、子コンポーネントから渡されhandleOpenModalopenModal関数を返す関数を定義しました。ボタンがクリックされると、関数が呼び出されます。childRef.current.openModal(value)

 

子コンポーネントは、次のコードのようになります。

import React, { forwardRef, useImperativeHandle, useState } from 'react';

function ChildComponent (props, ref) {
 const [openModal, setOpenModal] = useState(false);

 useImperativeHandle(ref, () => ({
  openModal: (value) => setOpenModal(value),
 }));

  if(!openModal) return null;

    return (
        <div>
            <p>This is a modal!</p>
            <button onClick={() => setOpenModal(false)}> Close </button>
        </div>
    )

}

export default forwardRef(ChildComponent);

で定義されforwardRefopenModal関数を公​​開するために、子コンポーネントをでラップしましたuseImperativeHandle。親コンポーネントでは、子コンポーネントで定義された状態が変更され、子コンポーネントのみが再レンダリングされます。問題が解決しました!

ReactuseLayoutEffectフック

useEffectフックと同様に、useLayoutEffectフックを使用すると、API呼び出し、サブスクリプションの設定、関数コンポーネントのDOMの手動操作などの副作用を実行できます。

Reactは、DOM更新の実行後useEffectと両方で起動しますが、ブラウザーがユーザーに表示する更新を同期的に描画する前に呼び出され、ブラウザーが更新を非同期で描画した後に呼び出されます。useLayoutEffectuseLayoutEffectuseEffect

したがって、ブラウザはuseLayoutEffect実行されるまでブラウザの更新をペイントできません。このため、主にを使用しますuseEffect。これは、副作用が実行されている間、ブラウザーにローダーのようなものをユーザーに表示します。

ただし、ユーザーに更新を表示する前に、副作用を実行してDOMを更新したい場合がいくつかあります。useLayoutEffect次の構文を使用してこれを行うことができます。

構文

useLayoutEffect(callback, [dependencies])
  • callback:副作用ロジックを含む関数
  • dependencies:依存関係の配列。依存関係のいずれかの値が変更されると、コールバック関数が再度実行されます

以下のコードを検討してください。

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

  const TestHooks = () => {
    const [randomNumber, setRandomNumber] = useState(0);

    useEffect(() => {
    if (randomNumber === 0) {
        setRandomNumber(Math.random() * 1000);
    }
  }, [randomNumber]);

    return (
        <div className='App'>
            <p>{randomNumber}</p>
            <button onClick={() => setRandomNumber(0)}>
                Change value 
            </button>
        </div>
    );
  };

  export default TestHooks;

上記には、状態を乱数で更新し、状態をにリセットするボタンが含まれるという副作用があります0。上記のコードをuseEffectフックで実行0すると、リセットボタンをクリックしたときに番号が次の乱数に変わるときにちらつき効果が見られます。

次に、に変更useEffectuseLayoutEffectて、ボタンをもう一度クリックします。次の乱数への移行がスムーズになります。

のコードuseEffect

DOM updates => Browser paints the update for users to see => useEffect is run => another DOM update => Broswer paints the second update for user to see

のコードuseLayoutEffect

DOM updates => useLayoutEffect is run =>another DOM update => Broswer paints the overall update for user to see

コードを試して詳細を確認できます。

ユースケース

かつて、クライアント用の静的Webサイトを開発していたとき、ルーティングにuseLayoutEffectHook and React RouterDOMを使用しました。ただし、異なるページ間を移動するときに、ページのウィンドウスクロール位置が上に移動せず、代わりに、前のページの位置からスクロールが開始されることに気付きました。これは、React RouterDOMでは珍しいことではありません。

この問題はuseLayoutEffect次のように解決できます。

import { useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

ファイルには、以下のコードのようになります。index.js

function Index() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

基本的に、コンテンツを表示する前に、ユーザーをページの上部に移動するようにブラウザーに指示します。ではuseLayoutEffect、私たちはそのプロセスのシームレスを作ることができます。

useLayoutEffectフックには他にもいくつかの実用的なアプリケーションがあります。すべてのDOMミューテーションの後、useLayoutEffect同期して起動します。したがって、要素のスクロール位置やその他のスタイルの取得から、特定のスクロール位置でのアニメーションの追加まで、DOMのレイアウトを読み取って変更するために使用できます。ただし、このフックが実行され、別のDOM更新が行われるまで、ユーザーには何も表示されないことに注意してください。

ReactuseDebugValueフック

ユーザーエクスペリエンスを向上させるために使用される他のフックとは異なり、useDebugValue開発者エクスペリエンスを向上させ、開発者がReactDevToolsに簡単な形式で情報を記録できるようにします。useDebugValueフックは、カスタムReactフックと組み合わせてのみ使用する必要があることに注意してください。

構文

useDebugValue (value )

React DevToolsに精通している場合は、組み込みのReact Hookがカスタムフックのように、useStateまたはuseRefカスタムフックで使用されるときはいつでも、ReactDevTools内でそれぞれの値をデバッグすることをご存知でしょう。

たとえば、以下のカスタムフックについて考えてみます。

import { useDebugValue, useState } from "react"

export default function useCustomHook() {
  const [name, setName] = useState("")
  const [address, setAddress] = useState("")

  return [name, setName, address, setAddress]
}

カスタムフックインを呼び出して、DevToolsを調べてみましょう。App.js

import useCustomHook from './useCustomHook';

function App() {

  useCustomHook();

  return (
    <>
    <div className="App">
      <p>hey</p>
    </div>
    </>
  );
}

export default App;

React DevToolsを調べると、の値useStateがすでにログに記録されていることがわかります。との2つの状態がnameありaddressます:

Usestate Value LoggedUsestate Value Loggedログに記録されたUsestate値

この時点では、空の文字列がどの状態値に属しているかはわかりません。単純なカスタムフックを作成している場合は、コードに簡単に戻って、それnameが最初に来ることを確認できるため、DevToolsの最初の状態になるはずです。

ただし、さまざまなコンポーネントで使用する複雑なカスタムフックを構築する場合は、デバッグ中にどの値がどの状態に属するかを追跡する方法が必要になります。これを行うには、useDebugValueReactDevToolsのカスタムフックに値のラベルを表示するために使用できます。

以下の更新されたカスタムフックを参照してください。

import { useDebugValue, useState } from "react"

export default function useCustomHook() {
  const [name, setName] = useState("")
  const [address, setAddress] = useState("")

  useDebugValue(name ? 'Name has been set' : 'Name has not been set')

  return [name, setName, address, setAddress]
}

更新されたDevToolsは次のとおりです。

Updated Devtools更新されたDevtools

name使用して、状態の変化に応じての値を監視できるため、useDebugValueその値を推測する必要はありません。useDebugValueDevToolsの値を見ても、フックの状態がすぐにはわからない場合に役立ちます。

useDebugValueオプションの2番目のパラメーターであるフォーマット関数を取ります。JSONデータの解析や日付のフォーマットなど、受け取った値を読み取る前にフォーマットする必要があるとします。useDebugValueデバッグ値を受け取り、フォーマットされた値を返しますが、DevToolsが開いていて、値が検査されている場合にのみ実行されます。

useDebugValue(date, date => date.toDateString());

結論

このチュートリアルでは、ほとんどの場合は必要ないが、特定のエッジケースに直面したときに私たちの生活を楽にすることができる3つのReactフックについて説明しました。

useImperativeHandleフックは、私たちは親コンポーネントに子コンポーネント内の値、状態、または機能を公開することができます。useLayoutEffect私たちは、サブスクリプションを設定し、API呼び出しのような副作用を実行し、手動で機能コンポーネントでDOMを操作することができます。最後に、 useDebugValueフックを使用すると、開発者はReactDevToolsに情報を簡単に記録できます。

これで、これらの特別なReactフックに精通し、これらの状況の1つに遭遇したときにそれらを使用する方法を知っている必要があります。この記事がお役に立てば幸いです。

リンク: https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

#react-native 

What is GEEK

Buddha Community

生活を楽にする3つのReactフック

生活を楽にする3つのReactフック

Reactフックは、関数コンポーネントのコンテキスト内でコアReact機能へのアクセスを提供します。従来、Reactを最適化するには、開発者は関数コンポーネントとクラスコンポーネントを切り替える必要がありましたが、Reactフックを使用すると、プロジェクト全体で関数コンポーネントを使用して、小規模アプリケーションと大規模アプリケーションの両方を構築できます。

クラスコンポーネントよりも関数コンポーネントを書くのが好きなReact開発者なら、この記事はあなたにぴったりです。あなたは、とそれほど慣れていない可能性があることを我々は役に立つが、まだやや過小評価3がフックに反応を見てみましょうuseImperativeHandleuseLayoutEffectuseDebugValue。それらのユースケース、構文、およびいくつかのコード例について説明します。始めましょう!

ReactuseImperativeHandleフック

Reactでは、データは、単方向データフローと呼ばれる小道具を介して親コンポーネントから子コンポーネントに渡されます。親コンポーネントは、子コンポーネントで定義された関数を直接呼び出すことも、自分自身の値を取得するために手を伸ばすこともできません。

特定の状況では、親コンポーネントが子コンポーネントに到達し、子コンポーネントで発生したデータを取得して独自に使用する必要があります。このタイプのデータフローはuseImperativeHandleフックを使用して実現できます。これにより、子コンポーネント内の値、状態、または関数を、を介して親コンポーネントに公開できますref。親コンポーネントがアクセスできるプロパティを決定することもできます。これにより、子コンポーネントのプライベートスコープが維持されます。

構文

useImperativeHandle(ref, createHandle, [dependencies])
  • ref:親コンポーネントから渡された参照
  • createHandle:親コンポーネントに公開される値
  • dependencies:変更時に​​フックを再実行する値の配列

ユースケース

双方向のデータとロジックフローが必要であるが、状態管理ライブラリを導入して物事を過度に複雑にしたくない場合は、useImperativeHandleフックが最適です。

たとえばuseImperativeHandle、親コンポーネントのボタンがクリックされたときにモーダルコンポーネントを開く必要があるときに、フックを使用したことがあります。

親コンポーネントで状態を定義すると、モーダルボタンがクリックされるたびに親コンポーネントとその子が再レンダリングされるため、子コンポーネントの状態が必要でした。その代わりに、私は、モーダル状態を記憶されているModal使用してコンポーネントuseImperativeHandleforwardRef

以下のコードを検討してください。

import React, { useRef } from 'react';
import Child from './Child';

 const ParentComponent = () => {

    const childRef = useRef(null);

    const handleOpenModal = (value) => {
        childRef.current.openModal(value);
    }


    return (
        <div>
            <p>This is a parent component</p>
            <Child ref={childRef}/>

            <button onClick={() => handleOpenModal(true)}>Open modal</button>
        </div>
    )

}

export default ParentComponent;

上記でref、子コンポーネントに渡したを定義しました。以下のコードでは、が子コンポーネントでref渡される最初のパラメーターuseImperativeHandleになります。

また、子コンポーネントから渡されhandleOpenModalopenModal関数を返す関数を定義しました。ボタンがクリックされると、関数が呼び出されます。childRef.current.openModal(value)

 

子コンポーネントは、次のコードのようになります。

import React, { forwardRef, useImperativeHandle, useState } from 'react';

function ChildComponent (props, ref) {
 const [openModal, setOpenModal] = useState(false);

 useImperativeHandle(ref, () => ({
  openModal: (value) => setOpenModal(value),
 }));

  if(!openModal) return null;

    return (
        <div>
            <p>This is a modal!</p>
            <button onClick={() => setOpenModal(false)}> Close </button>
        </div>
    )

}

export default forwardRef(ChildComponent);

で定義されforwardRefopenModal関数を公​​開するために、子コンポーネントをでラップしましたuseImperativeHandle。親コンポーネントでは、子コンポーネントで定義された状態が変更され、子コンポーネントのみが再レンダリングされます。問題が解決しました!

ReactuseLayoutEffectフック

useEffectフックと同様に、useLayoutEffectフックを使用すると、API呼び出し、サブスクリプションの設定、関数コンポーネントのDOMの手動操作などの副作用を実行できます。

Reactは、DOM更新の実行後useEffectと両方で起動しますが、ブラウザーがユーザーに表示する更新を同期的に描画する前に呼び出され、ブラウザーが更新を非同期で描画した後に呼び出されます。useLayoutEffectuseLayoutEffectuseEffect

したがって、ブラウザはuseLayoutEffect実行されるまでブラウザの更新をペイントできません。このため、主にを使用しますuseEffect。これは、副作用が実行されている間、ブラウザーにローダーのようなものをユーザーに表示します。

ただし、ユーザーに更新を表示する前に、副作用を実行してDOMを更新したい場合がいくつかあります。useLayoutEffect次の構文を使用してこれを行うことができます。

構文

useLayoutEffect(callback, [dependencies])
  • callback:副作用ロジックを含む関数
  • dependencies:依存関係の配列。依存関係のいずれかの値が変更されると、コールバック関数が再度実行されます

以下のコードを検討してください。

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

  const TestHooks = () => {
    const [randomNumber, setRandomNumber] = useState(0);

    useEffect(() => {
    if (randomNumber === 0) {
        setRandomNumber(Math.random() * 1000);
    }
  }, [randomNumber]);

    return (
        <div className='App'>
            <p>{randomNumber}</p>
            <button onClick={() => setRandomNumber(0)}>
                Change value 
            </button>
        </div>
    );
  };

  export default TestHooks;

上記には、状態を乱数で更新し、状態をにリセットするボタンが含まれるという副作用があります0。上記のコードをuseEffectフックで実行0すると、リセットボタンをクリックしたときに番号が次の乱数に変わるときにちらつき効果が見られます。

次に、に変更useEffectuseLayoutEffectて、ボタンをもう一度クリックします。次の乱数への移行がスムーズになります。

のコードuseEffect

DOM updates => Browser paints the update for users to see => useEffect is run => another DOM update => Broswer paints the second update for user to see

のコードuseLayoutEffect

DOM updates => useLayoutEffect is run =>another DOM update => Broswer paints the overall update for user to see

コードを試して詳細を確認できます。

ユースケース

かつて、クライアント用の静的Webサイトを開発していたとき、ルーティングにuseLayoutEffectHook and React RouterDOMを使用しました。ただし、異なるページ間を移動するときに、ページのウィンドウスクロール位置が上に移動せず、代わりに、前のページの位置からスクロールが開始されることに気付きました。これは、React RouterDOMでは珍しいことではありません。

この問題はuseLayoutEffect次のように解決できます。

import { useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useLayoutEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

ファイルには、以下のコードのようになります。index.js

function Index() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

基本的に、コンテンツを表示する前に、ユーザーをページの上部に移動するようにブラウザーに指示します。ではuseLayoutEffect、私たちはそのプロセスのシームレスを作ることができます。

useLayoutEffectフックには他にもいくつかの実用的なアプリケーションがあります。すべてのDOMミューテーションの後、useLayoutEffect同期して起動します。したがって、要素のスクロール位置やその他のスタイルの取得から、特定のスクロール位置でのアニメーションの追加まで、DOMのレイアウトを読み取って変更するために使用できます。ただし、このフックが実行され、別のDOM更新が行われるまで、ユーザーには何も表示されないことに注意してください。

ReactuseDebugValueフック

ユーザーエクスペリエンスを向上させるために使用される他のフックとは異なり、useDebugValue開発者エクスペリエンスを向上させ、開発者がReactDevToolsに簡単な形式で情報を記録できるようにします。useDebugValueフックは、カスタムReactフックと組み合わせてのみ使用する必要があることに注意してください。

構文

useDebugValue (value )

React DevToolsに精通している場合は、組み込みのReact Hookがカスタムフックのように、useStateまたはuseRefカスタムフックで使用されるときはいつでも、ReactDevTools内でそれぞれの値をデバッグすることをご存知でしょう。

たとえば、以下のカスタムフックについて考えてみます。

import { useDebugValue, useState } from "react"

export default function useCustomHook() {
  const [name, setName] = useState("")
  const [address, setAddress] = useState("")

  return [name, setName, address, setAddress]
}

カスタムフックインを呼び出して、DevToolsを調べてみましょう。App.js

import useCustomHook from './useCustomHook';

function App() {

  useCustomHook();

  return (
    <>
    <div className="App">
      <p>hey</p>
    </div>
    </>
  );
}

export default App;

React DevToolsを調べると、の値useStateがすでにログに記録されていることがわかります。との2つの状態がnameありaddressます:

Usestate Value LoggedUsestate Value Loggedログに記録されたUsestate値

この時点では、空の文字列がどの状態値に属しているかはわかりません。単純なカスタムフックを作成している場合は、コードに簡単に戻って、それnameが最初に来ることを確認できるため、DevToolsの最初の状態になるはずです。

ただし、さまざまなコンポーネントで使用する複雑なカスタムフックを構築する場合は、デバッグ中にどの値がどの状態に属するかを追跡する方法が必要になります。これを行うには、useDebugValueReactDevToolsのカスタムフックに値のラベルを表示するために使用できます。

以下の更新されたカスタムフックを参照してください。

import { useDebugValue, useState } from "react"

export default function useCustomHook() {
  const [name, setName] = useState("")
  const [address, setAddress] = useState("")

  useDebugValue(name ? 'Name has been set' : 'Name has not been set')

  return [name, setName, address, setAddress]
}

更新されたDevToolsは次のとおりです。

Updated Devtools更新されたDevtools

name使用して、状態の変化に応じての値を監視できるため、useDebugValueその値を推測する必要はありません。useDebugValueDevToolsの値を見ても、フックの状態がすぐにはわからない場合に役立ちます。

useDebugValueオプションの2番目のパラメーターであるフォーマット関数を取ります。JSONデータの解析や日付のフォーマットなど、受け取った値を読み取る前にフォーマットする必要があるとします。useDebugValueデバッグ値を受け取り、フォーマットされた値を返しますが、DevToolsが開いていて、値が検査されている場合にのみ実行されます。

useDebugValue(date, date => date.toDateString());

結論

このチュートリアルでは、ほとんどの場合は必要ないが、特定のエッジケースに直面したときに私たちの生活を楽にすることができる3つのReactフックについて説明しました。

useImperativeHandleフックは、私たちは親コンポーネントに子コンポーネント内の値、状態、または機能を公開することができます。useLayoutEffect私たちは、サブスクリプションを設定し、API呼び出しのような副作用を実行し、手動で機能コンポーネントでDOMを操作することができます。最後に、 useDebugValueフックを使用すると、開発者はReactDevToolsに情報を簡単に記録できます。

これで、これらの特別なReactフックに精通し、これらの状況の1つに遭遇したときにそれらを使用する方法を知っている必要があります。この記事がお役に立てば幸いです。

リンク: https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

#react-native