Почему эта часть моего компонента перерисовывается при интервальном вызове? - PullRequest
Новая
       56

Почему эта часть моего компонента перерисовывается при интервальном вызове?

0 голосов
/ 06 мая 2020

Я создаю приложение для викторины с перехватчиками реакции, и у меня есть некоторые проблемы.

У меня есть обратный отсчет от 20 с заданным интервалом, но это вызывает повторную визуализацию чего-то, не связанного с моим компонентом.

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

 const [userScores, setUserScores] = useState([])


 useEffect(() => {
   const userScoreObject = allAvatars.map((user) => {
   user.score = 0;
   return user;
 })
  setUserScores(userScoreObject);
 }, [])

Затем у меня есть другой useEffect для моего таймера в зависимости от состояния игры. 

useEffect(() => { 
  let interval; 
  if (gameState === 'play') {
    interval = setInterval(() => {
      setTimer(timer -= 1)
  }, 1000)
 } else if (gameState === 'pause') {
  return clearInterval(interval);
 }
 return () => clearInterval(interval)
 }, [gameState])

Я помещаю только gameState в массив зависимостей, так как хочу, чтобы этот эффект вызывался только при изменении состояния игры. Состояние игры инициализируется как «игра»

В моем JSX Im сопоставление этих пользовательских оценок. 

 {
    userScores && 
      userScores.map((user, index) => {
        console.log(user)
        return (
          <div key={index} >
            <img src={user.avatar} alt='avatar'></img>
            <p>{user.score}</p>

          </div>
        )
      })
  }

Проблема в том, что этот журнал консоли создается каждую секунду. Почему таймер вызывает повторную визуализацию?

Спасибо

1 Ответ

1 голос
/ 06 мая 2020

React всегда будет выполнять полный рендеринг компонента при изменении его состояния. Следовательно, вызов setTimer вызовет выполнение вашей функции рендеринга. Убедитесь, что вы не путаете повторный рендеринг с обновлением DOM .

Часто повторный рендеринг оказывает приемлемое влияние на производительность из-за уменьшения виртуального DOM изменения на странице, но есть некоторые затраты. Если происходит дорогостоящий рендеринг, вы можете рассмотреть возможность разделения части, которую вы не хотите повторно рендерить, на ее собственный компонент и использовать на ней React.memo, чтобы даже если родительский компонент повторного рендеринга не будет (при условии, что его свойства не изменятся).

...