React Hook의 useEffecfa 함수 사용에 대한 간략한 분석-JS 튜토리얼-php.cn

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

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

useEffect

useEffecf의 기본 사용법

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

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

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

사실 네트워크 요청, 수동 DOM 업데이트 및 일부 이벤트 모니터링은 모두 React DOM 업데이트의 부작용입니다. 이러한 기능을 완료하는 것을 효과 후크라고 합니다.

이제 요구 사항이 있는 경우: 페이지의 제목에 항상 카운터 수를 표시하고 클래스 구성 요소와 후크를 사용하여 각각 구현합니다

클래스 구성 요소 구현

import React, { PureComponent } from &#39;react&#39;

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

로그인 후 복사

Function 구성 요소와 Hook 구현:

useEffect Hook을 통해 React가 렌더링 후 특정 작업을 수행해야 함을 알릴 수 있습니다.
useEffect에서는 DOM 업데이트 후 React에서 실행할 콜백 함수를 전달해야 합니다. 작업이 완료되면(
구성 요소가 렌더링된 후
) 이 함수가 다시 호출됩니다.기본적으로 첫 번째 렌더링 이후이든 각 업데이트 이후이든 이 콜백 함수는 일반적으로 우리는 이 콜백 함수에 부작용 작업(
네트워크 요청, DOM 운영, 이벤트 모니터링
등)을 작성합니다.默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数; 一般情况下我们在该回调函数中都是编写副作用的操作(例如网络请求, 操作DOM, 事件监听)
因此需要注意的是, 有许多说法说useEffect就是用来模拟生命周期的, 其实并不是; useEffect可以做到模拟生命周期, 但是他主要的作用是用来执行副作用的

import React, { memo, useEffect, useState } from &#39;react&#39;

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

로그인 후 복사

清除副作用(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 &#39;react&#39;

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

    })

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

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

export default App

로그인 후 복사

使用多个useEffect

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

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

一个函数组件中可以使用多个Effect Hook，我们可以将逻辑分离到不同的useEffect中:

import React, { memo, useEffect } from &#39;react&#39;

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 &#39;react&#39;

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

로그인 후 복사

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 onClick={() => 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 &#39;react&#39;

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 &#39;react&#39;

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!