Блог

Главная - Вопросы по программированию - Как повторно использовать компонент, смонтировал ли эквивалентный хук в нескольких компонентах

Как повторно использовать компонент, смонтировал ли эквивалентный хук в нескольких компонентах

#javascript #reactjs #react-hooks

#javascript #reactjs #реагирующие перехваты

Вопрос:

У меня есть useEffect хук, который выполняет несколько операций при монтировании компонента, этот эффект использования повторяется во многих компонентах, и мне интересно, могу ли я перенести эти операции в пользовательский хук, а затем использовать это в каждом компоненте, и как бы это выглядело?

Мой хук useEffect выглядит следующим образом:

 useEffect(() => {
  performOperationOne();
  performOperationTwo();
}, []);

Должен ли я просто создать хук usePerformOperation и добавить эту useEffect логику, затем импортировать хук в каждый компонент и добавить вызов хука в другой:

 const triggerOperations = usePerformOperation();
useEffect(() => {
  triggerOperations()
}, []);

Это правильно? Извините, все еще нечетко с хуком.

Обновление: что-то вроде этого:

 import React from "react";
import usePerformOperation from "./usePerformOperation";

const Test = () => {
  usePerformOperation();

  return <h1>Testing Operations...</h1>;
};

export default Test;

Комментарии:

1. Вам не нужно useEffect в каждом компоненте просто вызывать usePerformOperation() в component.

2. Как бы выглядел хук? Я не уверен, что бы я вернул внутри него?

Ответ №1:

Это зависит от ситуации, не каждый раз, когда вам нужно возвращать что-то из пользовательских перехватов.

Рассматривайте пользовательский хук как фрагмент кода, который будет внедрен в ваш компонент.

В этом случае вам не нужно ничего возвращать из вашего хука.

 function usePerformOperation () {
  useEffect(() => {
    performOperationOne();
    performOperationTwo();
  }, []);
 // nothing is returned
}

const Test = () => {
  usePerformOperation();

  return <h1>Testing Operations...</h1>;
};

эквивалентно

 const Test = () => {
  useEffect(() => {
    performOperationOne();
    performOperationTwo();
  }, []);
  return <h1>Testing Operations...</h1>;
};

Ответ №2:

 import { useEffect, useState } from "react";
import axios from "axios";

export default () => {
    const [results, setResults] = useState([]);
    const [errorMsg, setErrorMsg] = useState("");

    //Method that calls API with parameter. You have to call this method to run the effect
    const searchAPI = async (_p) => {
    try {
      const res = await axios.get("/search", {
        params: {
          term: _p,
          limit: 40,
          location: "san jose",
        },
      });
      setErrorMsg("");
      setResults(res.data.businesses);
    } catch (ex) {
      setErrorMsg("Something went wrong");
    }
  };

  useEffect(() => {
    searchAPI("");
  }, []);

  return [searchAPI, results, errorMsg];
};

// Сохраните приведенный выше код в имени файла как useCustomHook
// В вашем файле компонента импортируйте этот хук, а в вашем функциональном компоненте напишите

const [SearchAPI, results, ErrorMsg] = useCustomHook();