React优化-惰性加载

使用react-lazyload实现react的懒加载

Posted by wang chong on May 28, 2019

惰性加载是一种优化网站的老技术了,它的作用是如果在某一时刻资源没有被查看或需要,就不要渲染它们。

为什么要有惰性加载

当今的网站项目越来越庞大,每次都需要加载很多首屏不需要的资源,特别是SPA这种架构,首次请求就需要把所有的资源全部加载过来,这种方式极大的增加了首屏渲染时间。本来首屏就是视窗中可以看到的部分,没有看到的就没有必要渲染出来,这种就可以极大的减少首屏渲染时间,达到优化的作用。

惰性加载技术

一般惰性加载是只渲染视窗内的东西,下面没有展示的通过滚动加载的方式加载出来。

React惰性加载

开始使用自己搭的简单的React脚手架来构建一个react项目,也可以使用create-react-app快速构建一个react项目。

由于加载所有必须有多条数据,可以借用jsonplaceholder中的数据。

const data = [{
    userId: 1,
    id: 1,
    title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
},
.......
]
export default data;

然后创建一个App.jsx,内容如下:

import React from "react";
import data from "../store/data";
import Post from "./Post";
import "./App.css";

const App = () => (
    <div className="App">
        <h2>LazyLoad Demo</h2>
        <div className="post__container">
            {data.map(post => (
                <Post key={post.id} {...post}/>
            ))}
        </div>
    </div>
);
export default App;

每一条数据是一个Post组件,再创建一个Post.jsx

import React from "react";

const Post = ({id, title, body}) => (
    <div className="post">
        <div className="post__body">
            <h4>{title}</h4>
            <p>{body}</p>
        </div>
    </div>
);

export default Post;

项目CSS样式的话可以自己调一下。此时已经可以看到页面了。

此时并不是惰性加载,是把所有的都渲染了出来。

接下来使用react-lazyload这个库

react-lazyload

安装

npm install react-lazyload –save

lazyload需要一个预先显示的组件,就是说当目标组件还没有渲染的时候先使用一个组件代替。

import React from "react";
import data from "../store/data";
import LazyLoad from "react-lazyload";
import Post from "./Post";
import "./App.css";

const Loading = () => (
    <div className="post loading">
        <h5>Loading...</h5>
    </div>
);

const App = () => (
    <div className="App">
        <h2>LazyLoad Demo</h2>
        <div className="post__container">
            {data.map(post => (
                 <LazyLoad 
                     key={post.id} placeholder={<Loading/>}
                 >
                    <Post key={post.id} {...post}/>
                </LazyLoad>
            ))}
        </div>
    </div>
);
export default App;

这样一个懒加载就实现了。

react-lazyload原理浅谈

lazyload的原理就是通过LazyLoad组件把目标组件包裹,判断目标组件是否可见,如果可见就渲染,如果不可见就渲染出替换组件。