React组件获取图片加载高度传父组件引发无限重渲染问题

首先咱们拆解下你遇到的无限重渲染循环的根源：
当图片加载完成后，Image组件调用父组件的setUnitHeight方法更新了App的unit状态。如果后来你尝试把unit作为props传递给Image组件，那么App每次更新unit都会触发Image的重渲染。若此时Image组件没有正确控制渲染逻辑，会导致<img>元素被重新挂载（或React判定需要重新处理它），进而再次触发onLoad事件，再次调用setUnitHeight，形成无限循环。

下面是几个针对性的解决方案：

方案1：给Image组件添加加载完成标记，确保onLoad只执行一次 #

在Image组件的state里加一个isLoaded状态，标记图片是否已经加载完成。后续即使组件重渲染，也不再重复执行高度计算和父组件状态更新的逻辑：

import MyImage from './images/myImage.jpg';
class Image extends React.Component {
  constructor(props) {
    super(props);
    this.state = { height: 0, isLoaded: false }; // 添加加载完成标记
  }
  getHeight = (e) => {
    // 已加载完成则直接返回，避免重复执行
    if (this.state.isLoaded) return;
    const height = e.target.getBoundingClientRect().height;
    this.setState({ height: height, isLoaded: true });
    this.props.setUnitHeight(height);
  }
  render() {
    const image = this.props.image;
    // 注意：静态导入的图片直接用image作为src即可，无需image.name
    return (
      <img src={image} onLoad={this.getHeight} />
    );
  }
}

方案2：控制Image组件的重渲染逻辑 #

如果你的Image组件不需要依赖父组件的unit状态，不要把unit作为props传递给它！这样父组件更新unit时，Image的props没有变化，就不会触发重渲染。

如果必须传递额外props，你可以用PureComponent或者手动实现shouldComponentUpdate来避免不必要的重渲染：

用PureComponent（浅比较props和state） #

class Image extends React.PureComponent {
  // ... 其余代码和上面一致
}

手动实现shouldComponentUpdate #

如果需要更精细的控制，比如只有当image props变化时才重渲染：

class Image extends React.Component {
  // ... 构造函数和getHeight方法不变

  shouldComponentUpdate(nextProps) {
    // 仅当image发生变化时允许重渲染
    return nextProps.image !== this.props.image;
  }

  render() {
    // ... 渲染逻辑不变
  }
}

方案3：避免不必要的函数绑定 #

你的代码里onLoad用了箭头函数绑定this，其实可以直接把getHeight方法传给onLoad（因为你已经用箭头函数定义了getHeight，this已经绑定好了），这样能减少不必要的函数创建，也有助于避免一些渲染问题：

// 把原来的
<img src={image.name} onLoad={(e)=>{this.getHeight(e)}} />
// 改成
<img src={image} onLoad={this.getHeight} />

这些方案都能帮你打破无限重渲染的循环，你可以根据自己的实际场景选择最合适的一种。

内容的提问来源于stack exchange，提问作者Winter