记录一下第一次写HOC,实现一个简单的loading功能。也可以使用React.Suspense显示loading。
效果图
1.Hook版高阶组件, 通过组件的props是否有数据来判断显示Loading组件还是Component
import React, { useState } from 'react';
function LoadingCom() {
return <div>loading......</div>;
}
const withLoading = (Component: any) => {
const newComponent = (props: any) => {
const [title, setTitle] = useState('我是HOC传过来的标题。。');
return props.count ? (
<Component {...props} title={title} />
) : (
<LoadingCom />
);
};
return newComponent;
};
export default withLoading;
2.使用setTimeout在父组件中模拟异步请求数据
import React, { useState, useEffect } from 'react';
const HomePage: React.FC = () => {
const [count, setCount] = useState(0);
// 2s 后的到数据
useEffect(() => {
setTimeout(() => {
setCount(1);
}, 1000);
}, []);
return (
<div>我是父组件</div>
<AsyncCom count={count}></AsyncCom>
);
}
export default HomePage;
3.子组件中使用withLoading
import withLoading from '@/components/LoadingHoc';
function AsyncCom(props: any) {
return (
<div>
我是异步的子组件,异步数据:{props.count}
<div>标题:{props.title}</div>
</div>
);
}
export default withLoading(AsyncCom);