[Conocimiento de front-end] Consolidación de la base React (cuarenta y tres) - Gancho de efecto

Consolidación de la base React (cuarenta y tres) - Gancho de efecto

1. Uso básico de Effect Hook

Effect Hook se usa para completar algunas funciones similares al ciclo de vida en clase.

Cuando se usan componentes de clase, ya sea renderizado, solicitudes de red o manipulación de DOM, su lógica y código se mezclan. Por ejemplo, queremos mostrar el resultado del contador en la etiqueta. En el componente de clase, lo implementamos a lo largo del ciclo de vida, de la siguiente manera:

import React, {
    
     PureComponent } from "react";

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

    this.state = {
    
    
      counter: 100,
    };
  }

  componentDidMount() {
    
    
    document.title = this.state.counter;
  }

  componentDidUpdate() {
    
    
    document.title = this.state.counter;
  }

  render() {
    
    
    const {
    
     counter } = this.state;
    return (
      <div>
        <h2>计数：{
    
    counter}</h2>
        <button onClick={
    
    (e) => this.setState({
    
     counter: counter + 1 })}>
          +1
        </button>
      </div>
    );
  }
}

export default App;

En los componentes de función, podemos usar useEffect para completar otras cosas además de representar la interfaz, es decir, completar 副作用的事情. Esto hace que el código y la lógica se vean más claros y concisos:

import React, {
    
     memo, useEffect, useState } from "react";

export default memo(function App() {
    
    
  const [count, setCount] = useState(200);

  // 完成一些除渲染外，副作用的事情
  useEffect(() => {
    
    
    // 当前传入的回调函数会在组件被渲染完成后，自动执行
    // 网络请求/DOM操作/事件监听
    document.title = count;
  });

  return (
    <div>
      <h2>计数：{
    
    count}</h2>
      <button onClick={
    
    (e) => setCount(count + 1)}>+1</button>
    </div>
  );
});

Como puede ver, a través del gancho de useEffect, puede indicarle a Reaction qué operaciones realizar después de renderizar. Después de que react ejecute la operación de actualización de DOM, devolverá la llamada a la función de devolución de llamada que pasamos en useEffect. Por defecto, esta función se llamará ya sea en el primer renderizado o después de cada actualización.

2. Efecto que necesita ser eliminado

En el componente de clase, generalmente componentDidMountconfiguramos el evento de escucha y componentWillUnmountborramos el evento de escucha; mientras que en el componente de función que usa useEffect, podemos usar el valor de retorno (función de devolución de llamada) de useEffect para realizar la operación de limpieza del monitoreo de eventos:

import React, {
    
     memo, useEffect, useState } from "react";

export default memo(function App_clear() {
    
    
  const [count, setCount] = useState(0);

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 监听事件
    // const unsubscribe = store.subscribe(() => {});

    // function foo() {}
    // eventBus.on("test", foo);

    // 监听和取消放在一个地方，内聚性高
    console.log("假设监听unsubscribe、eventBus等事件");

    // // 返回值：回调函数 => 组件重新渲染或组件卸载时执行
    return () => {
    
    
      console.log("取消监听unsubscribe、eventBus等事件");
    };
  });

  return (
    <div>
      <button onClick={
    
    (e) => setCount(count + 1)}>+1({
    
    count})</button>
    </div>
  );
});

La función devuelta en useEffect es un mecanismo de efecto de compensación opcional, que puede realizar la lógica de configurar el monitoreo y cancelar el monitoreo juntos para mejorar la cohesión.

Tres, el uso de múltiples efectos.

Supongamos que realizamos las siguientes tres operaciones en useEffect:

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 1.修改document的title

    // 2.对redux中数据变量的监听

    // 3.监听eventBus中的事件
  });

Encontraremos que a medida que aumenta la cantidad de eventos, la lógica en useEffect se vuelve gradualmente más compleja, en este momento, podemos dividirlo en múltiples efectos y ejecutarlos secuencialmente, es decir, reaccionar admite múltiples useEffects:

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 1.修改document的title
    console.log('1.修改document的title');
  });

  useEffect(() => {
    
    
    // 2.对redux中数据变量的监听
    console.log('2.对redux中数据变量的监听');
  });

  useEffect(() => {
    
    
    // 3.监听eventBus中的事件
    console.log('3.监听eventBus中的事件');
  });

Cuando activamos la representación de la página cada vez, podemos ver que se ejecutan tres eventos en secuencia:

4. El mecanismo de ejecución de Effect

Descubrimos que la operación de monitoreo se realizará cada vez que se haga clic en el botón. Suponiendo que el efecto es un evento de solicitud de red, se iniciará una solicitud después de cada actualización. Este monitoreo y solicitudes frecuentes definitivamente no son lo que queremos. Podemos usar el segundo parámetro de useEffect para controlar su mecanismo de ejecución:

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 1.修改document的title
    console.log("1.修改document的title");
  }, [count]);

  useEffect(() => {
    
    
    // 2.对redux中数据变量的监听
    console.log("2.对redux中数据变量的监听");
  }, []);

  useEffect(() => {
    
    
    // 3.监听eventBus中的事件
    console.log("3.监听eventBus中的事件");
  }, []);

Cuando pasamos una matriz vacía, significa que el evento de efecto secundario no depende de ningún contenido. En este momento, es consistente con el efecto de componentDidMount. useEffect solo se ejecutará cuando se cargue por primera vez:

Cuando pasamos en el evento 1 [count], significa que el useEffect donde se encuentra el evento 1 depende de la variable de conteo, y cuando la variable de conteo cambia, se ejecutará. Por lo tanto, cuando hacemos clic en el botón para modificar el valor de conteo, solo el evento 1 se activará una y otra vez: