Мастерство в использовании хука usePrevious в React

Введение

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

React хук usePrevious

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

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

Определите пользовательский хук, который принимает аргумент value.
Используйте хук useRef() для создания ref для value.
Используйте хук useEffect() для запоминания последнего значения value.
Верните значение 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, чтобы улучшить свои навыки.