Гэтсби / Реакт: Как предотвратить это перекрашивание, которое происходит при изменении фонового изображения дисплея: ни один элемент?

Question

РЕДАКТИРОВАНИЕ : На основании ответа @HMR я включаю его предложения и предоставляю полный код

Если у меня есть такой компонент, как этот

const wait = ...
cosnt get_new_wallpaper = ... // it changes pool_of_images_fetched

const Wallpaper = () => {
  const [background, setBackground] = useState()
  const [nextBackground, setNextBackground] = useState()
  const [visible, setVisible] = useState('first') // not changed in this example
  const [pool_of_images_fetched, setPool_of_images_fetched] = useState([])


  const setNewWallpaper = useCallback(async stillMounted => {
    const wallpaper = await get_new_wallpaper(
     pool_of_images_fetched,
     setPool_of_images_fetched
    )
    stillMounted.value && setBackground(wallpaper)

    await wait(2000)
    const wallpaper2 = await get_new_wallpaper(
     pool_of_images_fetched,
     setPool_of_images_fetched
    )
    stillMounted.value && setNextBackground(wallpaper2)
  }, [])

  useEffect(() => {
    let stillMounted = {value: true}
    const init_new_wallpaper = async () => await setNewWallpaper (stillMounted)
    init_new_wallpaper()
    return function cancel() {
      stillMounted.value = false
    }
  }, [])

  return (
   <>
    <PureFirst background={background} onClick={setNewWallpaper} />
    <PureSecond background={nextBackground} onClick={setNewWallpaper} />
   </>
  )
}

const First = styled.div`
  display: ${props => (props.visible === 'first' ? 'unset' : 'none')};
  background-image: url('${props => props.background}');
`
const Second = styled.div`
  display: ${props => (props.visible === 'second' ? 'unset' : 'none')};
  background-image: url('${props => props.background}');
`
const PureFirst = memo(First)
const PureSecond = memo(Second)

КогдаsetNewWallpaper() изменения background Я вижу, <First> меняется соответственно, затем 2 секунды ожидания, а затем, когда это меняется nextBackground Я также вижу, <Second> меняется соответственно

Как видите, <First>видно (display:unset;), но <Second> не видно (display:none;)

Проблема в том, что <First> перекрашивается при изменении <Second>, даже если <Second> не видно, так что происходит, если через 10 секунд на сайте появляется вспышка

Почему этот код здесь не запоминается?

Answer 1

Вы можете сделать первый и второй чистый компонент с помощью React.memo и использовать useCallback , чтобы удостовериться, что setNewWallpaper не меняет ссылку между визуализациями.

IЯ не знаю, что это за зависимости от setNewWallpaper, так как вы не опубликовали весь код, поэтому я предполагаю, что их нет:

const PureFirst = React.memo(First);
const PureSecond = React.memo(Second);
export const Wallpaper = () => {
  const [background, setBackground] = useState();
  const [nextBackground, setNextBackground] = useState();

  const setNewWallpaper = useCallback(async () => {
    setBackground(...);
    await wait(2000);
    setNextBackground(...);
  }, []);

  return (
    <>
      <PureFirst
        background={background}
        onClick={setNewWallpaper}
      />
      <PureSecond
        background={nextBackground}
        onClick={setNewWallpaper}
      />
    </>
  );
};