ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

フックとは何ですか? React でよく使用される 2 つのフックについて話しましょう

著者：Eve Cole 更新時間：2022-08-26 13:47:04
この記事では、フックについて説明し、開発にフックを使用することが推奨される理由について説明し、React で最もよく使用される 2 つのフックを紹介します。これが皆さんのお役に立てば幸いです。

VUE3.0 をすぐに始める方法: 学習を始める前に、

まずフックとは何かを紹介します。

フックは特に関数型コンポーネントで使用され、クラス コンポーネントの他の機能を置き換えることができます。実際の仕事でもよく使われます。

開発にフックを使用することが推奨されるのはなぜですか?

フックは、機能コンポーネントの開発と連携するために特別に使用され、多数のコンポーネントによる混乱を避けるために使用できます。フックは開発に便利で、開発者にとってコードを理解しやすくなります。

上記は個人的な概要です。その他の理由については、React 公式 Web サイトを参照してください:

https://react.docschina.org/docs/hooks-intro。 html#motivation

useState

コード内:

React.useState(0) はクラスコンポーネントの this に相当します。 state に属性値

変数を追加することは、クラスコンポーネントの this.state に相当します。 変数 setVariable の値

を使用できます

。

変数の値を変更するには、クラスコンポーネントの this.setState と同等にすることができます。

import React, (useState) from 'react'
デフォルト関数 useState_Demo() をエクスポート {
    const [variable, setVariable] = useState(0);//代入を分割することで、変数と setVariable を取得します。
    関数changeVariable(){
        setVariable((variable) => variable +1) //setVariable のコールバックで渡されるパラメータは変数です
    }
    与える （
        <div> 
            <button onclick = {change}>クリックして変数+1を作成します</button>
        </div>
    )
次の

コード

からわかるように、useEffect の使用は、クラス コンポーネントの import React, (useState, useEffect) の使用を

置き換え

ます

。
デフォルト関数 useState_Demo() をエクスポート {
   const [variable, setVariable] = useState(0);//代入を分割することで、変数と setVariable を取得します。
    
    useEffect(() => {
        //この return は、コンポーネントによって監視されているデータが変更されたとき、またはコンポーネントがアンインストールされたときに呼び出されます。これは、componentWillUnmount フック return () => { と同等です。
            console.log('コンポーネントはアンインストールされました')
        }
    }, [variable])//2 番目のパラメータは [variable] に渡されます。これは、変数の更新変更が検出されると、useEffect コールバックが再度実行されることを意味します。 //2 番目のパラメータは [] に渡されます。これは、検出では useEffect コールバックが 1 回だけ実行されることを意味します。これは、componentDidMount フックと同等です。 // 2 番目のパラメータは、コンポーネントに状態変化がある限り、useEffect コールバックが実行されます。これは、componentDidUpdate フック関数changeVariable(){ と同等です。
        setVariable((variable) => variable +1) //setVariable のコールバックで渡されるパラメータは変数です
    }
    与える （
        <div> 
            <button onclick = {change}>クリックして変数+1を作成します</button>
        </div>
    )

フックを使用する際の注意点

:

1. フックはコンポーネント関数の最外層でのみ使用してください。ループ、条件、または入れ子関数でフックを呼び出さないでください

。
デフォルト関数 useState_Demo() をエクスポート {
   //これは正しい useEffect(() => {})
    
   //エラー 1、条件判定を使用する if(true) {
        useEffect(() => {})
   }
   //エラー 2、ループ while(true) の使用 {
        useEffect(() => {})
   }
  //エラー 3、ネストされた useEffect(() の使用 => {
      useEffect(() => {})
  })
2.
'react' からのフック import React, (useState, useEffect) は、

コンポーネントの関数の外では使用できません。

//エラー 1、useState がコンポーネント関数の外で使用されています
const [変数, setVariable] = useState(0);
//エラー 2、useEffect がコンポーネント関数の外で使用されています
useEffect(() => {})
デフォルト関数 useState_Demo() をエクスポート {
   //コンポーネント関数内で使用するのが正しい const [variable, setVariable] = useState(0);
3.

上記のエラーを回避するには、 eslint-plugin-react-hooks ESLint プラグインをインストールして、コード内のエラーをチェックします。

カスタム

フックは、相互間のロジックの共有を容易にする機能です。コンポーネントは実際には再利用され、関数はカプセル化されており、カスタム フックは、react に付属するフックも呼び出します。名前は use

// Custom フック
で始まる必要があります。
関数 useHook(initState) {
  const [変数, setVariable] = useState(initState)
  変数を返します。
}
//カスタムフックを使用する
デフォルト関数 useState_Demo() をエクスポート {
    const variableState = useHook(0)
疑問に思っているかもしれませんが
、

複数のコンポーネントで同じフックを使用すると状態が共有されるのでしょうか?

答えは「いいえ」です。なぜなら、react に付属するフックへの各呼び出しは独立しており、互いに影響を与えないためです。同様に、カスタム フックも独立しており、複数回呼び出されても互いに影響を与えません。
関連記事