React хук useDelayedState

Введение

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

Хук React useDelayedState

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

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

1. Используйте хук useState(), чтобы создать состояние-значение, содержащее фактическое state и булево значение loaded.
2. Используйте хук useEffect(), чтобы обновить состояние-значение, если меняется condition или loaded.
3. Создайте функцию updateState, которая обновляет только значение state, если loaded имеет истинное значение.

const useDelayedState = (initialState, condition) => {
  const [{ state, loaded }, setState] = React.useState({
    state: null,
    loaded: false
  });

  React.useEffect(() => {
    if (!loaded && condition) setState({ state: initialState, loaded: true });
  }, [condition, loaded]);

  const updateState = (newState) => {
    if (!loaded) return;
    setState({ state: newState, loaded });
  };

  return [state, updateState];
};

Вот пример того, как использовать хук useDelayedState:

const App = () => {
  const [branches, setBranches] = React.useState([]);
  const [selectedBranch, setSelectedBranch] = useDelayedState(
    branches[0],
    branches.length
  );

  React.useEffect(() => {
    const handle = setTimeout(() => {
      setBranches(["master", "staging", "test", "dev"]);
    }, 2000);
    return () => {
      handle && clearTimeout(handle);
    };
  }, []);

  return (
    <div>
      <p>Selected branch: {selectedBranch}</p>
      <select => setSelectedBranch(e.target.value)}>
        {branches.map((branch) => (
          <option key={branch} value={branch}>
            {branch}
          </option>
        ))}
      </select>
    </div>
  );
};

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

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

Резюме

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