@React

---

延迟加载React组件，适用于PC和Mobile端。

安装

$ npm install lr-react-lazy-render

使用说明

在一个页面很长的时候，为了优化首屏的加载效率，可以使用@React这个组件对你原有的组件进行一层包装，他就会在还没有出现在屏幕可视区域之前不会加载你的组件

例如：

1import AsyncPainter from "lr-react-lazy-render";
2
3function App() {
4 return (<div>
5  你的组件
6 </div>);
7}
8
9export default AsyncPainter({
10  TargetComponent: App
11});

组件参数

接口	是否必传	类型	默认	说明
TargetComponent	是	ReactComponent	null	你那个需要异步加载的组件
distance	否	number	0	当你那个组件距离可视区域多远距离时候开始加载
placeholderStyle	否	object	看下面	当你那个组件还没有加载之前，默认会预先加载一个站位组件，这个组件必须设置一个高度才有效果，默认高度200px，如果要改变就在这个字段里设置样式即可
CustomPlaceholder	否	ReactComponent	空div元素	如果你对默认展位组件不满意，你可以通过这个字段自定义占位组件

placeholderStyle默认:

1{
2  minHeight: '200px',
3  background: '#f9f8f9',
4  borderRadius: 8,
5  marginBottom: '10px',
6}