React хук usePrevious

ReactReactBeginner

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

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

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/StateManagementGroup(["State Management"]) react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) 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-38404{{"React хук usePrevious"}} react/event_handling -.-> lab-38404{{"React хук usePrevious"}} react/hooks -.-> lab-38404{{"React хук usePrevious"}} react/use_state_reducer -.-> lab-38404{{"React хук usePrevious"}} end

React хук usePrevious

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

Чтобы сохранить предыдущее состояние или свойства, вы можете создать пользовательский хук. Вот шаги:

  1. Определите пользовательский хук, который принимает аргумент value.
  2. Используйте хук useRef() для создания ref для value.
  3. Используйте хук useEffect() для запоминания последнего значения value.
  4. Верните значение ref.current.
const usePrevious = (value) => {
  const ref = React.useRef();
  React.useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

Вот пример использования хука usePrevious:

const Counter = () => {
  const [value, setValue] = React.useState(0);
  const lastValue = usePrevious(value);

  return (
    <div>
      <p>
        Текущее: {value} - Предыдущее: {lastValue}
      </p>
      <button onClick={() => setValue(value + 1)}>Увеличить</button>
    </div>
  );
};

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

Компонент Counter отображает текущее и предыдущее значения value. Когда нажимается кнопка Увеличить, значение value обновляется, а предыдущее значение сохраняется с использованием хука usePrevious.

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

Резюме

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