如何让React函数组件在prop变化时重渲染，实现温度颜色动态更新？

问题原因 #

• 依赖项配置错误：你在useEffect的依赖数组中加入了color，而effect内部又会更新color，会触发无限循环的effect执行，异常的执行逻辑会导致React阻断后续的渲染更新。
• 冗余状态增加不同步风险：颜色值完全可以通过传入的weather prop直接计算得到，不需要单独存为state，多余的状态更新环节会增加prop和展示内容不同步的概率。
• 父层传参可能未做不可变更新：如果父组件更新weather数据时是直接修改原对象的属性而非生成全新的对象，React的浅比较逻辑会判定prop没有变化，不会触发子组件重渲染。

解决方案 #

1. 优化子组件逻辑，删除冗余的state和useEffect

直接根据prop实时计算颜色值，省去额外的状态同步环节：

const Current = (props) => {
  const { weather } = props
  // 直接计算颜色，添加默认值避免取值报错
  const color = tempScheme[weather.current.temp_f] ?? '0,0,0'

  return (
    <Container>
        <CardContent>
            <Header>
                <Typography variant='h6'>Currently</Typography>
                <Typography variant='h6'> {formatDate(weather.location.localtime)} </Typography>
            </Header>
            <Weather>
                <Typography variant='h5'> {weather.current.condition.text} </Typography>
                <Typography variant='h2' style={{color: `rgb(${color})`}}> {Math.round(weather.current.temp_f)}&deg; </Typography>
            </Weather>
            <Location>
                <Typography variant='body1'> {weather.location.name}, {weather.location.region}</Typography>
                <Image src={weather.current.condition.icon} />
            </Location>
        </CardContent>
    </Container>
  )
}

2. 父组件确保不可变更新weather数据

更新weather时要生成全新的对象，不要直接修改原对象的属性：

// 错误写法
// oldWeather.current.temp_f = 新温度值

// 正确写法
const newWeather = {
  ...oldWeather,
  current: {
    ...oldWeather.current,
    temp_f: 新温度值
  }
}
// 将newWeather作为prop传递给Current组件

3. 可选强制重渲染方案

如果仍存在更新不及时的问题，可以在父组件调用Current时传入动态key，只要key发生变化React就会强制重新创建组件，保证渲染和数据同步：

<Current 
  weather={weather} 
  key={weather.location.localtime} // 用唯一的时间戳作为key
/>

内容的提问来源于stack exchange，提问作者Austin Maxwell Edger