React хук usePrevious

Введение

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

Skills Graph

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