React Hook의 useEffecfa 함수 사용에 대한 간략한 분석

이 글에서는 React Hook의 useEffecfa 함수를 소개하고 useEffecfa 함수의 사용법에 대해 이야기해보겠습니다.

useEffect

useEffecf의 기본 사용법

위에서 계속해서, 이전 글에서 State Hook을 설명했는데, 이미 이 Hook 상태를 통해 기능적 구성요소에서 정의할 수 있습니다. . [관련 권장사항: Redis 동영상 튜토리얼, 프로그래밍 동영상]

클래스 컴포넌트에 생명주기 함수가 있을 수 있다는 것을 알고 있는데, 함수 컴포넌트의 생명주기와 유사한 이러한 함수를 어떻게 정의할 수 있을까요?

Effect Hook을 사용하면 클래스의 수명 주기와 유사한 일부 기능을 완료할 수 있습니다.

사실 네트워크 요청, 수동 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 id="counter">{counter}</h2>
        <button onClick={() => this.setState({counter: counter+1})}>+1</button>
      </div>
    )
  }
}

export default App

Function 구성 요소와 Hook 구현:

useEffect Hook을 통해 React가 렌더링 후 특정 작업을 수행해야 함을 알릴 수 있습니다.

• useEffect에서는 DOM 업데이트 후 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 id="counter">{counter}</h2>
      <button onClick={() => setCounter(counter+1)}>+1</button>
    </div>
  )
})

export default App

---

清除副作用(Effect)

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除:

比如我们之前的事件总线或Redux中手动调用subscribe;

都需要在componentWillUnmount有对应的取消订阅;

Effect Hook通过什么方式来模拟componentWillUnmount呢?

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B:

type EffectCallback = () => (void | (() => void | undefined));

为什么要在 effect 中返回一个函数?

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数;

如此可以将添加和移除订阅的逻辑放在一起;

它们都属于 effect 的一部分;

React 何时清除 effect?

React 会在组件更新和卸载的时候执行清除操作, 将上一次的监听取消掉, 只留下当前的监听 ;

正如之前学到的，effect 在每次渲染的时候都会执行;

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

---

使用多个useEffect

使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题:

比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中;

一个函数组件中可以使用多个Effect Hook，我们可以将逻辑分离到不同的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

Hook允许我们按照代码的用途分离它们， 而不是像生命周期函数那样, 将很多逻辑放在一起:

React将按照 effect 声明的顺序依次调用

그래서 많은 말이 있다는 점에 유의해야 합니다. useEffect는 수명주기를 시뮬레이션하는 데 사용되지만 실제로는 그렇지 않습니다. useEffect는 수명주기를 시뮬레이션할 수 있지만 주요 기능은 부작용을 수행하는 것입니다

---

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

Clear Side 효과(Effect)

클래스 구성 요소를 작성하는 동안 우리는 componentWillUnmount

에서 특정 부작용 코드를 지워야 합니다:

예를 들어, 이전 이벤트 버스나 Redux에서 수동으로 구독을 호출하는 것,

둘 다 있습니다.

Effect Hook은 어떻게 componentWillUnmount를 시뮬레이션하나요?

useEffect 콜백 함수 A 자체는 반환 값을 가질 수 있으며 이 반환 값은 또 다른 입니다. 콜백 함수 B

:

type EffectCallback = () => (void | (() => void | undefine));🎜🎜🎜함수를 반환하려는 이유 효과가 있나요?🎜🎜🎜🎜이것은 선택적 효과 제거 메커니즘입니다. 각 효과는 지우기 함수를 반환할 수 있습니다.🎜🎜이 방법으로 구독 추가 및 제거 논리를 통합할 수 있습니다.🎜🎜이것들은 모두 효과의 일부입니다.🎜🎜🎜🎜React가 지워지는 시기 ? 효과?🎜🎜🎜🎜React는 구성 요소가 업데이트되고 제거될 때 정리 작업을 수행하여 마지막 리스너를 취소하고 현재 리스너만 남깁니다.🎜🎜전에 배운 것처럼 효과는 렌더링될 때마다 실행됩니다.🎜 🎜

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 사용🎜🎜🎜🎜Hook을 사용하는 목적 중 하나는 클래스의 수명 주기에서 종종 많은 논리를 함께 사용하는 문제를 해결하는 것입니다🎜: 🎜 🎜🎜예를 들어 네트워크 요청, 이벤트 모니터링 및 DOM의 수동 수정은 종종 componentDidMount에 배치됩니다. 🎜🎜🎜🎜 여러 효과 후크를 함수 구성 요소에서 사용할 수 있으며 논리를 다양한 useEffect로 분리할 수 있습니다. 🎜:🎜 rrreee 🎜🎜Hook을 사용하면 라이프 사이클 함수처럼 많은 로직을 하나로 묶는 대신 목적에 따라 코드를 분리할 수 있습니다🎜:🎜🎜🎜React는 구성 요소의 구성 요소를 순서대로 호출합니다. 효과 선언 순서에 따라 각 효과;🎜🎜🎜🎜🎜🎜🎜 useEffect 성능 최적화🎜🎜🎜🎜기본적으로 useEffect의 콜백 함수는 렌더링될 때마다 다시 실행되지만 이로 인해 두 가지 문제가 발생합니다🎜: 🎜🎜🎜일부 우리는 코드를 한 번만 실행하고 싶습니다(🎜예를 들어 네트워크 요청은 구성 요소의 첫 번째 렌더링 중에 한 번 실행될 수 있으므로 여러 번 실행할 필요가 없습니다🎜). 클래스 구성 요소의 componentDidMount 및 componentWillUnmount;🎜🎜또한 여러 번 실행하면 특정 성능 문제가 발생합니다. 🎜🎜🎜🎜useEffect를 실행해야 하는 시기와 실행하지 말아야 하는 시기를 어떻게 결정합니까? 매개변수: 🎜

• 参数一: 执行的回调函数, 这个参数我们已经使用过了不再多说;
• 参数二: 是一个数组类型, 表示 该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组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝

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

위 내용은 React Hook의 useEffecfa 함수 사용에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!