используя кастомный хук, каждый раз делать рендеринг - PullRequest
Новая
       140

используя кастомный хук, каждый раз делать рендеринг

0 голосов
/ 19 июня 2020

Я создаю настраиваемую переменную сокращения isLoading , может изменить isLoading true или false. Я импортирую перехватчик useLoading в свой компонент. Но при отправке триггера мой компонент всегда перерисовывается, и я не понимаю почему. Моя демонстрация здесь очень проста https://codesandbox.io/s/use-custom-hook-loading-oqn8e. Можете ли вы объяснить мне, почему мой компонент всегда повторно рендерится, и посоветовать мне это исправить. Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Компонент перерисовывается, потому что его состояние и контекст обновляются. Этот компонент быстро перерисовывается, и React по-прежнему отличается от DOM, чтобы записывать только то, что было изменено, поэтому это не проблема. Состояние 1003 * в useLoading станет устаревшим. Вместо этого используйте useSelector напрямую без useState и просто отправьте событие, чтобы установить его. https://codesandbox.io/s/use-custom-hook-loading-w4pc0?file= / src / hooks / loading. js

0 голосов
/ 19 июня 2020

Проблема:

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

введите описание изображения здесь

«Фаза рендеринга» ... Может быть приостановлена, прервана или перезапущена с помощью React.

Решение:

Попробуйте использовать эффект для регистрации чего-либо, поскольку он гарантированно запускается один раз за цикл рендеринга (рендеринг + фиксация). Здесь вы увидите только один журнал на каждое обновление / вызов setLoading. 

function Main() {
  useEffect(() => {
    console.log("Main re-render");
  })
  const [, setLoading] = useLoading();
  return (
    <div>
      <h3>Main</h3>
      <button onClick={() => setLoading(true)}>Start Loading</button>
      <button onClick={() => setLoading(false)}>End Loading</button>
    </div>
  );
}
...