React useEffectOnce Хук

ReactReactBeginner

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38381{{"React useEffectOnce Хук"}} react/event_handling -.-> lab-38381{{"React useEffectOnce Хук"}} react/hooks -.-> lab-38381{{"React useEffectOnce Хук"}} react/use_state_reducer -.-> lab-38381{{"React useEffectOnce Хук"}} end

Хук 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, чтобы улучшить свои навыки.