React Hook での useEffecfa 関数の使用の簡単な分析

この記事では、React Hook の useEffecfa 関数の紹介と useEffecfa 関数の使用方法の詳細について説明します。

useEffect の詳細な分析

##useEffec の基本的な使い方

#前回の記事でState Hookを説明しましたが、このフックを介して機能コンポーネントにStateを定義することができます。 [関連する推奨事項:

Redis ビデオ チュートリアル

、プログラミング ビデオ ]

クラス コンポーネントにライフサイクル関数が存在する可能性があることはわかっています。関数コンポーネントのライフ サイクルに似た関数を定義するには?

エフェクト フックを使用すると、クラス内のライフ サイクルに似たいくつかの関数を完了できます;

事実類似ネットワーク リクエスト、手動 DOM 更新、一部のイベント監視など、これらはすべて React による DOM 更新の副作用です。

#したがって、これらの機能を完了するフックはエフェクト フックと呼ばれます。

ここで要件があるとします。ページのタイトルには常にカウンターの数が表示され、クラス コンポーネントとフックを使用して

:

クラスをそれぞれ実装します。コンポーネントの実装

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: 100
    }
  }

  // 进入页面时, 标题显示counter
  componentDidMount() {
    document.title = this.state.counter
  }

  // 数据发生变化时, 让标题一起变化
  componentDidUpdate() {
    document.title = this.state.counter
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2>{counter}</h2>
        <button onClick={() => this.setState({counter: counter+1})}>+1</button>
      </div>
    )
  }
}

export default App

関数コンポーネントとフックの実装:

useEffect フックを通じて、レンダリング後に特定の操作を実行する必要があることを React に伝えることができます。

• useEffect では、コールバック関数を渡す必要があります。React が DOM 更新操作を完了した後 (
つまり、コンポーネントがレンダリングされた後
• )、この関数がコールバックされます;デフォルトでは
、このコールバック関数は最初のレンダリング後か各更新後に実行されます。通常、このコールバック関数には副作用操作 (
• ネットワーク リクエスト、DOM の操作、イベント監視など) を記述します。 )したがって、useEffect はライフ サイクルをシミュレートするために使用されるとよく​​言われていますが、実際にはそうではありません。useEffect はライフ サイクルをシミュレートできますが、その主な機能は副作用を実行することです

#

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

const App = memo(() => {
  const [counter, setCounter] = useState(200)

  // useEffect传入一个回调函数, 在页面渲染完成后自动执行
  useEffect(() => {
    // 一般在该回调函数在编写副作用的代码(网络请求, 操作DOM, 事件监听)
    document.title = counter
  })

  return (
    <div>
      <h2>{counter}</h2>
      <button onClick={() => setCounter(counter+1)}>+1</button>
    </div>
  )
})

export default App

#副作用をクリアする (効果)

---

クラスコンポーネントの作成プロセス中に、componentWillUnmountの特定の副作用コードをクリアする必要があります:

たとえば、前のイベントバスまたはReduxを手動で呼び出すsubscribe;

対応するコンポーネントウィルアンマウントのサブスクリプション解除が必要です;

エフェクトフックはコンポーネントウィルアンマウントをどのようにシミュレートしますか?

useEffect パス 入力された

コールバック関数 A

自体は戻り値を持つことができますこれは、別の

コールバック関数 B

:type EffectCallback = () = > (void | (() => void | unknown));

なぜ実際の関数を返す必要があるのですか?

これは、エフェクトのオプションのクリーンアップ メカニズムです。各エフェクトはクリア関数を返すことができます;

この方法で、サブスクリプションの追加と削除のロジックをまとめることができます;

これらはすべてエフェクトの一部です;

React はエフェクトをいつクリアしますか?

React はコンポーネントが更新されアンインストールされるときにクリア操作を実行し、最後の監視をキャンセルします。現在のリスナーは残ります;

前に学んだように、エフェクトはレンダリングされるたびに実行されます;

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  useEffect(() => {
    // 监听store数据发生改变
    const unsubscribe = store.subscribe(() => {

    })

    // 返回值是一个回调函数, 该回调函数在组件重新渲染或者要卸载时执行
    return () => {
      // 取消监听操作
      unsubscribe()
    }
  })

  return (
    <div>
      <h2>App</h2>
    </div>
  )
})

export default App

複数使用useEffect

---

Hook を使用する目的の 1 つは、クラスのライフサイクルで多くのロジックをまとめてしまうことがよくあるという問題を解決することです: たとえば、ネットワーク リクエスト、イベント モニタリング、DOM の手動変更は、componentDidMount に配置されることがよくあります;

関数コンポーネントでは複数のエフェクト フックを使用でき、分離することができますロジックを別の useEffect に分割する

:

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  // 监听的useEffect
  useEffect(() => {
    console.log("监听的代码逻辑")

    return () => {
      console.log("取消的监听代码逻辑")
    }
  })

  // 发送网络请求的useEffect
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  })

  // 操作DOM的useEffect
  useEffect(() => {
    console.log("操作DOM的代码逻辑")
  })

  return (
    <div>
      App
    </div>
  )
})

export default App

フックを使用すると、ライフサイクル関数

のように多くのロジックをまとめるのではなく、コードの目的に応じてロジックを分離できます。

React は、

コンポーネント内の各エフェクトを、エフェクトが宣言された順序

で呼び出します。

useEffect のパフォーマンスの最適化

---

デフォルトでは、useEffect のコールバック関数はレンダリングされるたびに再実行されますが、これにより 2 つの問題が発生します:一部のコードは 1 回だけ実行したいと考えています (

たとえば、ネットワーク リクエストはコンポーネントの最初のレンダリング中に 1 回実行でき、複数回実行する必要はありません

)、クラスコンポーネントのcomponentDidMountとcomponentWillUnmountに似ています 達成されたこと;さらに、複数の実行により特定のパフォーマンスの問題も発生します;

useEffectを実行するタイミングをどのように決定するか実行すべきでない場合は何ですか?

useEffect には実際には 2 つのパラメータがあります:

• 参数一: 执行的回调函数, 这个参数我们已经使用过了不再多说;
• 参数二: 是一个数组类型, 表示 该useEffect在哪些state发生变化时，才重新执行;(受谁的影响才会重新执行)

案例练习:

受count影响的Effect;

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

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 发送网络请求的useEffect, 只有在counter发生改变时才会重新执行
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  }, [counter])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []:

那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了;

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

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 传入空数组表示不受任何数据依赖
  useEffect(() => {
    // 此时传入的参数一这个回调函数: 相当于componentDidMount
    console.log("监听的代码逻辑")

    // 参数一这个回调函数的返回值: 相当于componentWillUnmount
    return () => {
      console.log("取消的监听代码逻辑")
    }
  }, [])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

总结: useEffect可以模拟之前的class组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝

更多编程相关知识，请访问：编程教学！！

以上がReact Hook での useEffecfa 関数の使用の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。