React中为Visibility Sensor内的img组件生成key属性的方法咨询

嘿，别担心，给React列表元素加key其实有几种可靠的方式，我结合你的场景给你拆解一下：

我写了一个React组件，实现思路是当元素处于Visibility Sensor检测范围内时，为其添加animated fadeInUp类，并将组件状态从hide切换为show。现在遇到的问题是每个img组件都需要设置key属性，请问该如何生成？

组件代码片段如下：

class Presentation extends React.Component{
  constructor(props){
    super(props);
    this.state = {IMG:'Need' + 'hide'};
    this.onChange = this.onChange.bind(this);
  }
  onChange(isVisible) {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    if(isVisible) {
      this.setState( {IMG :...} )
    }
  }
}

1. 优先使用数据的唯一标识（最佳实践） #

如果你的图片是从一个数据列表里渲染出来的（比如后端返回的图片数组，每个图片有唯一ID、或者独一无二的URL），直接用这个唯一值当key就好——这是React官方最推荐的方式，因为key稳定且唯一，不会因为列表顺序变化导致不必要的组件重渲染。

比如假设你的组件里维护了一个图片数组状态，修改后代码示例如下：

class Presentation extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isVisible: false, // 这里把状态名改成更清晰的命名啦
      images: [
        { id: 1, src: '/image1.jpg', alt: '演示图1' },
        { id: 2, src: '/image2.jpg', alt: '演示图2' },
        { id: 3, src: '/image3.jpg', alt: '演示图3' }
      ]
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange(isVisible) {
    console.log('Element is now %s', isVisible ? 'visible' : 'hidden');
    if(isVisible) {
      this.setState( {isVisible: true} )
    }
  }

  render() {
    return (
      <div>
        {this.state.images.map(img => (
          <img
            key={img.id} {/* 用图片的唯一ID当key */}
            src={img.src}
            alt={img.alt}
            className={this.state.isVisible ? 'animated fadeInUp' : ''}
          />
        ))}
      </div>
    );
  }
}

如果图片数据里没有ID，用图片的src也是可行的——只要每个图片的src都是独一无二的：

key={img.src}

2. 使用数组索引（仅限静态列表） #

如果你的图片列表是固定不变的（不会新增、删除、调整顺序），可以临时用数组的索引当key，但官方不推荐在动态列表里用——因为索引会随着列表元素变化而改变，导致React无法正确复用组件，影响性能。

示例代码：

render() {
  return (
    <div>
      {this.state.images.map((img, index) => (
        <img
          key={index} {/* 用数组索引当key */}
          src={img.src}
          alt={img.alt}
          className={this.state.isVisible ? 'animated fadeInUp' : ''}
        />
      ))}
    </div>
  );
}

3. 生成唯一ID（无现成唯一标识时） #

如果你的图片数据没有任何天然的唯一属性，可以手动生成唯一ID。比如用uuid库（先通过npm install uuid安装），或者自己写一个简单的生成函数，但注意要在组件初始化时生成ID，不要在render里每次生成新的ID——不然会导致组件每次渲染都重新挂载，浪费性能。

示例（用uuid）：

import { v4 as uuidv4 } from 'uuid';

class Presentation extends React.Component{
  constructor(props){
    super(props);
    // 初始化时给每个图片生成唯一ID
    const images = [
      { src: '/image1.jpg', alt: '演示图1' },
      { src: '/image2.jpg', alt: '演示图2' }
    ].map(img => ({ ...img, id: uuidv4() }));
    
    this.state = {
      isVisible: false,
      images: images
    };
    this.onChange = this.onChange.bind(this);
  }

  render() {
    return (
      <div>
        {this.state.images.map(img => (
          <img
            key={img.id} {/* 用生成的唯一ID当key */}
            src={img.src}
            alt={img.alt}
            className={this.state.isVisible ? 'animated fadeInUp' : ''}
          />
        ))}
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者Piotr Żak