react hooks 模式组件重绘问题

Question

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Tabbar from '../../components/Tabbar'
import { indexInfo, pondInfo } from '../../api/index'

import './index.scss'

function Home(props) {
  let [pondBalance, setPondBalance] = useState(0)
  let [rechargeTotal, setRechargeTotal] = useState(0)
  let [availBalance, setAvailBalance] = useState(0)
  let [prizeAmount, setPrizeAmount] = useState(0)
  let [nodeCnt, setNodeCnt] = useState(0)
  let [canDraw, changeCanDraw] = useState(true)
  let [countDown, setCountDown] = useState('00:00:00')

  useEffect(() => {
    console.log('useEffect只执行一次')
    getPondInfo()
    getIndexInfo()
    // eslint-disable-next-line
  }, [])
  const getPondInfo = () => {
    pondInfo().then(res => {
      pondBalance = setPondBalance(res.pondBalance)
      rechargeTotal = setRechargeTotal(res.rechargeTotal)
    }).catch(err => {
      console.log(err.message)
    })
  }
  const getIndexInfo = () => {
    indexInfo().then(res => {
      availBalance = setAvailBalance(res.availBalance)
      prizeAmount = setPrizeAmount(res.prizeAmount)
      nodeCnt = setNodeCnt(res.nodeCnt)
      canDraw = changeCanDraw(res.canDraw)
      countDown = setCountDown(res.pondInfo.countdown)
    }).catch(err => {
      console.log(err.message)
    })
  }

  return (
    <div className="home_view">
      <div className="container">
        <div className="amount_box">
          <div className="left">奖池剩余: { pondBalance }</div>
          <div className="right">X充值总量: { rechargeTotal }</div>
        </div>
        <div className="count_down_box">
          <div className="top">
            <div className="text">抽奖倒计时</div>
            <div className="count_down">{ countDown }</div>
          </div>
        </div>
        <div className="info_box">
          <Link to="/wallet" className="my_amount">
            <div className="amount_info">{ availBalance }</div>
            <div className="type_name">可用X币</div>
          </Link>
          <Link to="/order" className="win_amount">
            <div className="amount_info">{ prizeAmount }</div>
            <div className="type_name">中奖X币</div>
          </Link>
          <Link to="/club" className="my_club">
            <div className="amount_info">{ nodeCnt }</div>
            <div className="type_name">我的社区</div>
          </Link>
        </div>
      </div>
      <Tabbar></Tabbar>
    </div>
  )
}
export default Home

我在useEffect中调用了2个接口，这2个接口会更新useState,并展示在页面上，在useEffect中使用了第二个参数为空数组以保证只执行一次，通过控制台可以看到确实是只执行了一次

但是，不知道为什么在进行useState赋值的时候，触发了Tabbar这个组件重绘（Tabbar组件内的console被触发），为什么我在Home组件更新数据，会导致Tabbar组件的重绘

请问这种情况需要是否正常，应该怎么解决，还是说并无影响

Answer 1

因为你赋值state的时候 home组件重新render了 作为home子组件的Tabbar也会重新render

Answer 2

TabBar 属于 Home 的子组件, 怎么不执行 render 了, 只不过没有实际更新 dom