React useEffectOnce Хук

Введение

В этом практическом занятии мы научимся использовать хук useEffectOnce в React для выполнения обратного вызова функцией максимум один раз, когда определенное условие становится истинным. Это может быть полезно в ситуациях, когда мы хотим выполнить конкретное действие только один раз, например, когда компонент монтируется или когда кнопка нажата. В конце этого практического занятия вы будете лучше понимать, как реализовать этот хук в своих React-приложениях.

Skills Graph

Хук React useEffectOnce

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавлять код в script.js и style.css.

Ниже приведен код, реализующий функцию useEffectOnce(callback, when), которая запускает callback только один раз, когда условие when становится истинным.

Для реализации этой функции:

• Создайте переменную hasRunOnce с использованием хука useRef() для отслеживания статуса выполнения эффекта.
• Используйте хук useEffect(), который запускается только при изменении условия when.
• Внутри хука useEffect() проверьте, является ли when истинным и был ли эффект ранее выполнен. Если оба условия истинны, запустите callback и установите hasRunOnce в true.

const useEffectOnce = (callback, when) => {
  const hasRunOnce = React.useRef(false);
  React.useEffect(() => {
    if (when && !hasRunOnce.current) {
      callback();
      hasRunOnce.current = true;
    }
  }, [when]);
};

Вот пример использования useEffectOnce():

const App = () => {
  const [clicked, setClicked] = React.useState(false);
  useEffectOnce(() => {
    console.log("mounted");
  }, clicked);
  return <button onClick={() => setClicked(true)}>Click me</button>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

В примере useEffectOnce() используется для вывода в консоль "mounted" при первом нажатии на кнопку. Хук useEffectOnce() передается два аргумента: callback для выполнения и условие when для проверки. Условие when установлено в состояние clicked, поэтому callback выполняется только при первом нажатии, когда clicked становится истинным.

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по хуку React useEffectOnce. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.