关于元素显示和隐藏不同做法的区别

Question

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

第一种使用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>

Answer 1

Mr_Max 2020-08-04 03:39:31

同学你好！

第一种情况指定图片使用display:none隐藏，其周围的图片都会受到影响，会引发开销较高的回流和重绘，当然也取决于指定图片的位置。

第二种情况使用绝对定位，指定图片本身会受影响，但其他图片不受影响不会触发回流。fixed同理。

第三种情况显示一个指定元素，看其放置在哪里，是否影响页面上已有元素。