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

この記事では、フックについて説明し、開発にフックを使用することが推奨される理由について説明し、React で最も一般的に使用される 2 つのフックを紹介します。

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

フックは React 16.8 の新機能です。特に機能コンポーネントで使用されます。react を置き換えることができます。その他の機能は実際の作業でよく使用されます。 [関連する推奨事項: Redis ビデオ チュートリアル ]

開発にフックを使用することが推奨される理由

フックは機能コンポーネントの開発に特別に使用され、クラスの置き換えに使用できます。コンポーネントの数が多いことによる混乱を避けるためのいくつかのライフ サイクルなので、フックによって開発が促進され、開発者がコードを理解しやすくなります。

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

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

useState

Inコード:

React. useState(0) は、クラス コンポーネントの this.state と同等です。属性値

variable の追加は、クラス コンポーネントの this.state と同等です。の値変数

setVariable を使用して変数を変更できます。値は、クラス コンポーネントの this.setState と同等です。コンポーネント

#

import React,(useState) from 'react'
export default function useState_Demo() {
    const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

useEffect

コード内:

次のコードからわかるように、クラスコンポーネント内ではなくuseEffectが使用されています。componentDidMoun、componentDidUpdate、componentWillUnmount

import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    
    useEffect(() => {
        //这个return是在该组件监测的数据变化时或者被卸载时调用的，被卸载时调用可以相当于componentWillUnmount钩子 
        return () => {
            console.log('该组件被卸载了')
        }
    }, [variable])//第二个参数传了[variable]，表示检测variable的更新变化，一旦variable变化就会再次执行useEffect的回调
                  //第二个参数传了[],表示谁都不检测只执行一次useEffect的回调，相当于componentDidMount钩子
                  //第二个参数不传参，只要该组件有state变化就会执行useEffect的回调，相当于componentDidUpdate钩子
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

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

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

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //这里才是正确的
   useEffect(() => {})
    
   //错误1，使用了条件判断
   if(true) {
        useEffect(() => {})
   }
   //错误2，使用了循环
   while(true) {
        useEffect(() => {})
   }
  //错误3,使用了嵌套
  useEffect(() => {
      useEffect(() => {})
  })
}

2. フック

import React,(useState, useEffect) from 'react'
//错误1，在组件函数外使用了useState
const [variable, setVariable] = useState(0);
//错误2，在组件函数外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
   //在组件函数里使用才是正确的
   const [variable, setVariable] = useState(0);
}

3は使用できません上記のエラーを回避するには、

#eslint-plugin-react-hooks ESLint プラグインをインストールしてコード エラーをチェックしますカスタム フック

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

//自定义hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自定义hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

で始まる必要があります。状態を共有するために複数のコンポーネントで同じフックが使用されるのか疑問に思われるかもしれません。 ＃＃＃＃＃＃答えはいいえだ。なぜなら、react に付属するフックは独立していて、呼び出されるたびに互いに影響を与えないためです。同様に、カスタム フックも独立しており、複数回呼び出されても互いに影響しません。

プログラミング関連の知識の詳細については、こちらをご覧ください。

プログラミング入門

をご覧ください。 ！

以上がフックとは何ですか? React でよく使用される 2 つのフックについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。