图片懒加载

1, 下载安装懒加载模块
    npm i react-lazyload --save

2, 在src/assets/目录下放入懒加载占位图 placeholder.gif

3, 在需要使用懒加载的组件中导入懒加载模块和占位图
    import LazyLoad from 'react-lazyload';
    import placeholder from "../../asset/placeholder.gif"

4, 在组件rander函数中创建占位图片标签img
    var holderImg = <img src={placeholder} />

5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签
    <LazyLoad placeholder={holderImg}>
        <img src={item.room_src} alt="这是一个图片" />
    </LazyLoad >

//类组件
import React, { Component } from "react";
import styles from './Home.module.css'

import axios from 'axios'
// 第一步
import LazyLoad from "react-lazyload";
import placeholder from '../../assets/loading.gif'

console.log(styles)
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: []
        }
    }
    async componentDidMount() {
        //渲染完毕的生命周期函数
        // fetch('/douyu/api/RoomApi/live?page=1').then(res=>{
        //     return res.json()
        // }).then(res=>{
        //     console.log(res)
        // })
        let { data: res } = await axios.get('/douyu/api/RoomApi/live?page=1')
        this.setState({
            list: res.data
        }, () => console.log(this.state.list))
    }

    render() {
        // 第二部
        var holderImg = <img src={placeholder}></img>
        return (
            <div className="home">
                <h1 >首页</h1>
                <ul className={styles.ul}>
                    {
                        this.state.list.map(item => {
                            return (
                                <li key={item.room_id} className={styles.li}>
                                    {/* 第三步 */}
                                    <LazyLoad placeholder={holderImg}>
                                        <img src={item.room_src} alt="" />
                                    </LazyLoad>
                                    <h4>{item.room_name}</h4>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Home;