Analisis ringkas tentang penggunaan fungsi useEffecfa dalam React Hook

Artikel ini akan memperkenalkan anda kepada fungsi useEffecfa dalam React Hook dan bercakap tentang butiran fungsi useEffecfa saya harap ia akan membantu anda!

Analisis terperinci useEffect

Penggunaan asas useEffecf

Bersambung daripada perkara di atas, dalam artikel sebelum ini kami menerangkan State Hook Kami sudah boleh menggunakan cangkuk ini untuk menentukan keadaan dalam komponen berfungsi. [Cadangan berkaitan: Tutorial video Redis, Video pengaturcaraan]

Kami tahu bahawa mungkin terdapat fungsi kitaran hayat dalam komponen kelas, kemudian Bagaimana untuk mentakrifkan fungsi yang serupa dengan kitaran hayat dalam komponen fungsi?

Effect Hook membolehkan anda melengkapkan beberapa fungsi yang serupa dengan kitaran hayat dalam kelas;

Fakta Sama seperti permintaan rangkaian, kemas kini DOM manual, dan beberapa pemantauan acara, semuanya adalah kesan sampingan React yang mengemas kini DOM;

Jadi Cangkuk yang melengkapkan fungsi ini dipanggil Cangkuk Kesan;

Andaikan kita kini mempunyai keperluan: tajuk dalam halaman sentiasa memaparkan bilangan pembilang, gunakan komponen kelas dan Cangkuk untuk melaksanakan kelas :

masing-masing Pelaksanaan komponen

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 id="counter">{counter}</h2>
        <button onClick={() => this.setState({counter: counter+1})}>+1</button>
      </div>
    )
  }
}

export default App

Komponen Fungsi Plus pelaksanaan cangkuk:

melalui cangkuk useeffect, anda boleh memberitahu React bahawa ia perlu melakukan operasi tertentu selepas rendering; kami untuk meneruskan fungsi panggil balik. Selepas React menyelesaikan operasi DOM kemas kini (
• iaitu, selepas komponen diberikan
), fungsi ini akan dipanggil semula
• , ini fungsi panggil balik akan dilaksanakan sama ada selepas pemaparan pertama atau selepas setiap kemas kini secara amnya kami menulis operasi kesan sampingan dalam fungsi panggil balik ini (
seperti permintaan rangkaian, operasi DOM , mendengar acara
• )默认情况下
Oleh itu, perlu diingatkan bahawa terdapat banyak pepatah yang useEffect digunakan untuk mensimulasikan kitaran hayat, tetapi sebenarnya ia tidak; useEffect boleh mensimulasikan kitaran hayat, Tetapi fungsi utamanya adalah untuk melakukan kesan sampingan

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

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

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

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

export default App

---

Jelaskan kesan sampingan (Kesan)Semasa proses penulisan komponen kelas, kita perlu mengosongkan kod kesan sampingan tertentu dalam componentWillUnmount

:

Contohnya, bas acara sebelumnya atau panggilan manual dalam langgan Redux;

semua perlu mempunyai penyahlangganan yang sepadan dalam componentWillUnmount;

Bagaimana Effect Hook mensimulasikan componentWillUnmount?

useEffect yang diluluskan dalam

sendiri boleh mempunyai nilai pulangan, iaitu satu lagi

:回调函数A回调函数B

type EffectCallback = () => (void | (() => void | undefined));Mengapa kita perlu mengembalikan fungsi yang berkuat kuasa? kesan. Setiap kesan boleh mengembalikan fungsi pembersihan;

Dengan cara ini, logik langganan boleh disatukan;

Semuanya adalah sebahagian daripada kesan;

Bilakah React membersihkan kesannya?添加和移除

React akan melaksanakan operasi pembersihan apabila komponen dikemas kini dan dinyahpasang, membatalkan pemantauan terakhir, hanya meninggalkan pemantauan semasa; 🎜>

Seperti yang dipelajari sebelum ini, kesan dilaksanakan setiap kali ia dipaparkan; >

Salah satu tujuan menggunakan Hook adalah untuk menyelesaikan masalah sering menyatukan banyak logik dalam kitaran hayat kelas :

Sebagai contoh, permintaan rangkaian , pemantauan acara dan pengubahsuaian manual DOM, ini selalunya diletakkan dalam componentDidMount

Cangkuk Kesan Berbilang boleh digunakan dalam komponen fungsi, dan kita boleh memisahkan logik kepada; Kesan kegunaan yang berbeza

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

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

    })

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

  return (
    <div>
      <h2 id="App">App</h2>
    </div>
  )
})

export default App

:

---

Cangkuk membolehkan kita mengasingkan kod mengikut tujuannya, bukannya meletakkan banyak logik bersama-sama seperti fungsi kitaran hayat :

React akan mengikut susunan pengisytiharan kesanSetiap kesan dalam komponen;

pengoptimuman prestasi 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

Secara lalai, fungsi panggil balik useEffect akan dilaksanakan semula setiap kali ia dipaparkan, tetapi ini akan menyebabkan dua masalah

:

Sesetengah kod yang kami hanya mahu jalankan Hanya lakukan sekali sahaja (

Sebagai contoh, permintaan rangkaian boleh dilaksanakan sekali semasa pemaparan pertama komponen. Tidak perlu melaksanakannya beberapa kali

), sama seperti yang dilakukan dalam componentDidMount dan componentWillUnmount dalam komponen kelas;依次调用

Selain itu, pelbagai pelaksanaan juga akan menyebabkan masalah prestasi tertentu;

---

Bagaimanakah kita memutuskan bila useEffect harus dilaksanakan dan bila ia tidak sepatutnya dilaksanakan ?

useEffect sebenarnya mempunyai dua parameter:

• 参数一: 执行的回调函数, 这个参数我们已经使用过了不再多说;
• 参数二: 是一个数组类型, 表示 该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 id="nbsp-setCounter-counter-counter"> 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 id="nbsp-setCounter-counter-counter"> setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

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

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

Atas ialah kandungan terperinci Analisis ringkas tentang penggunaan fungsi useEffecfa dalam React Hook. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!