老师下面这三种的在渲染上有什么样的区别

第一种使用display:none:
<div className={styles.pic_slide}> {photoList.map((item, i) => ( <img key={item} src={item} alt="" style={{display:index === i ? "inline-block" : "none"}} /> ))} </div>

第二种使用绝对定位:
<div className={styles.pic_slide} style={{ width:$600\ast lengthpx‘,left:‘${index * -600}px}} > {photoList.map(item => <img key={item} src={item} alt="" />)} </div>

第三种只渲染一个元素:
<div className={styles.pic_slide}> {photoList.map((item, i) => { return index === i && ( <img key={item} src={item} alt="" /> ); })} </div>