React-Hooks----useEffect()

prefácio

useEffect() é um dos Hooks mais comumente usados ​​no React, que permite que componentes de função tenham funções semelhantes a componentes de classe componentDidMounte funções de ciclo de vidacomponentDidUpdate .componentWillUnmount

uso

useEffect() aceita 两个参数
um primeiro argumento 函数, chamado de função Effect, que define o que precisa ser feito após a renderização do componente.
O segundo parâmetro é um 数组, que contém a função do Effect 依赖的数据. Quando estes 数据发生变化, a função Effect será reexecutada. Se [] for especificado, a função callback só será executada após o primeiro render(), que é equivalente acomponentDidMount

A função Effect pode 返回一个清除函数ser usada para limpar alguns efeitos colaterais gerados pela função Effect quando o componente é descarregado, o que equivale acomponentWillUnmount

Aqui está um exemplo de código usando useEffect():

import {
    
     useEffect, useState } from 'react';

function MyComponent() {
    
    
  const [count, setCount] = useState(0);

  useEffect(() => {
    
    
    console.log(`You clicked ${
      
      count} times.`);
    return () => {
    
    
      console.log('Component unmounted.');
    }
  }, [count]);

  return (
    <div>
      <p>You clicked {
    
    count} times.</p>
      <button onClick={
    
    () => setCount(count + 1)}>Click me</button>
    </div>
  );
}

No código de exemplo acima, quando o componente é 初次渲染完成或 count 发生变化时usado, a função useEffect() será chamada e exibirá o número atual de cliques. Quando o componente for desmontado, a função de limpeza será chamada e o componente de saída será desmontado.