React хук useToggler

Введение

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

React хук useToggler

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

Для создания переменной состояния типа boolean, которая может переключаться между двумя состояниями, следуйте этим шагам:

1. Используйте хук useState(), чтобы создать переменную состояния value и ее функцию-сеттер.
2. Создайте функцию, которая переключает значение переменной состояния value, и закэшируйте ее с использованием хука useCallback().
3. Верните переменную состояния value и закешированную функцию-тогглера.

Вот пример реализации:

const useToggler = (initialState) => {
  const [value, setValue] = React.useState(initialState);

  const toggleValue = React.useCallback(() => setValue((prev) => !prev), []);

  return [value, toggleValue];
};

Затем вы можете использовать этот хук в своих компонентах, так:

const Switch = () => {
  const [val, toggleVal] = useToggler(false);
  return <button onClick={toggleVal}>{val ? "ON" : "OFF"}</button>;
};

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

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

Резюме

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