反应骨架

什么是反应骨架？

反应骨架（React Skeleton）是一种前端技术，可以提高页面加载速度和用户体验。它是在网站尚未加载完全时，提供一个简单的UI框架，以展示网站的基本布局和元素。这样一来，用户无需等待所有内容加载完成后才能看到网页，而是可以在网页加载的同时看到部分内容，提高体验。

反应骨架通常为网站的主要视觉元素提供占位符，比如菜单、文章列表、Banner等，以及网站的基础样式（比如背景色、字体、边距等），让用户在网站还没有完全加载时，就可以感知到该网站的视觉风格，增强用户体验。

使用场景

在网络较差的情况或者需要加载大量的数据时，反应骨架可以提高用户的等待体验。反应骨架在以下情况下被广泛使用：

• 网页包含大量内容和数据，比如图片、表格等。
• 用户需要下载并安装大量的JavaScript代码，使得网页加载时间变长。
• 用户网络速度较慢，需要等待网页加载的时间较长。

实现原理

反应骨架使用了React框架的特性，将页面元素渲染成一组基于最小样式的组件。这些组件的主要作用是占位，像骨架一样支撑显示内容的未来形状。一旦主要元素加载完成，反应骨架从HTML文档中移除，并用已加载内容替换掉原来的占位符。

实现步骤

1. 安装依赖

使用React框架创建反应骨架需要使用到以下依赖：

npm install react react-dom styled-components

• react: React核心库
• react-dom: React应用运行在浏览器上，需要使用react-dom来实现渲染。
• styled-components: 使编写CSS变得更加优雅、强大、有逻辑性，同时也有更好的拓展性。

2. 创建反应骨架组件

• 创建一个React组件，在这个组件中插入占位符。例如，我们创建一个按钮占位符：

import React from 'react'
import styled from 'styled-components'

const ButtonSkeleton = styled.button`
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #eee;
  border: none;
  border-radius: 5px;
`;

const App = () => (
  <div>
    <h1>Loading...</h1>
    <ButtonSkeleton />
  </div>
)

export default App

此时，页面上将会显示Loading...以及ButtonSkeleton。

3. 使用延迟加载，加载组件

为了在网站加载时先显示反应骨架，我们可以使用延迟加载。

• 首先，创建一个组件，在这个组件被加载之前，首先展示反应骨架。例如：

import React, {useState, useEffect} from 'react'
import styled from 'styled-components'

const ButtonSkeleton = styled.button`
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #eee;
  border: none;
  border-radius: 5px;
`;

const AppSkeleton = () => (
  <div>
    <h1>Loading...</h1>
    <ButtonSkeleton />
  </div>
)

export default AppSkeleton

• 然后，在该组件加载之后，在使用Promise延迟加载所需的组件，并在加载完成后将其渲染在DOM中。例如：

import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'
import App from './App'

const AppSkeleton = /* ... 省略*/

const AppWrapper = () => {
  const [isLoaded, setIsLoaded] = useState(false)

  useEffect(() => {
    // 延迟3秒，模拟网络加载
    const timer = setTimeout(() => {
      setIsLoaded(true)
      clearTimeout(timer)
    }, 3000)
  }, [])

  return (
    <div>
      {isLoaded ? <App /> : <AppSkeleton />}
    </div>
  )
}

ReactDOM.render(<AppWrapper />, document.getElementById('root'));

• 此时，页面首先会展示反应骨架，等待3秒（这里采用了setTimeout延迟加载）之后，将会展示组件本身。

这就是反应骨架的工作原理，使用比较简单。

总结

反应骨架可以很好地提高用户等待体验，特别是在网络条件比较恶劣或者数据量较大的情况下。通过React组件的特性，可以非常方便地实现反应骨架的功能。如果你的网站需要更好的用户体验，那么不妨试试反应骨架作为辅助方案。