Skip to content

Commit 4686102

Browse files
sanyuan0704sanyuan0704
committed
全部组件用hooks重构完成
1 parent 9a89858 commit 4686102

File tree

2 files changed

+147
-93
lines changed

2 files changed

+147
-93
lines changed

‎src/application/Singers/index.js‎

Lines changed: 64 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { PureComponent } from 'react';
1+
import React, { useRef, useEffect } from 'react';
22
import Horizen from '../../baseUI/horizen-item/index';
33
import { categoryTypes, alphaTypes } from '../../api/config';
44
import {
@@ -15,46 +15,53 @@ import LazyLoad, {forceCheck} from 'react-lazyload';
1515
import Loading from '../../baseUI/loading/index';
1616
import { renderRoutes } from 'react-router-config';
1717

18-
// 这里采用class，之前写过hooks版，但是pageCount的更新存在bug,
19-
// 有兴趣的小伙伴可以试试改为hooks版本， bug修复后换成函数式，欢迎大家提pr修正
20-
class Singers extends PureComponent{
21-
constructor(props) {
22-
super(props);
23-
Singers.scrollChild = React.createRef(null);
24-
}
25-
componentDidMount() {
26-
if(!this.props.singerList.length && !this.props.category && !this.props.alpha){
27-
this.props.getHotSinger();
18+
function Singers(props){
19+
const scrollRef = useRef(null);
20+
21+
const { singerList, category, alpha, pageCount, songsCount, pullUpLoading, pullDownLoading, enterLoading } = props;
22+
23+
const { getHotSinger, updateCategory, updateAlpha, pullUpRefresh, pullDownRefresh } = props;
24+
25+
useEffect(() => {
26+
if(!singerList.length && !category && !alpha) {
27+
getHotSinger();
2828
}
29-
}
29+
// eslint-disable-next-line
30+
}, []);
3031

31-
enterDetail (id) {
32-
this.props.history.push(`/singers/${id}`);
33-
}
34-
handlePullUp () {
35-
this.props.pullUpRefresh(this.props.category === '', this.props.pageCount);
36-
}
37-
handlePullDown(){
38-
this.props.pullDownRefresh(this.props.category, this.props.pageCount);
39-
}
40-
handleUpdateCategory(newVal) {
41-
if(this.props.category === this.props.newVal) return;
42-
this.props.updateCategory(newVal);
43-
}
32+
const enterDetail = (id) => {
33+
props.history.push(`/singers/${id}`);
34+
};
4435

45-
handleUpdateAlpha(newVal) {
46-
if(this.props.alpha === newVal) return;
47-
this.props.updateAlpha(newVal);
48-
}
49-
renderSingerList() {
50-
const {singerList} = this.props;
36+
const handlePullUp = () => {
37+
pullUpRefresh(category === '', pageCount);
38+
};
39+
40+
const handlePullDown = () => {
41+
pullDownRefresh(category, pageCount);
42+
};
43+
44+
const handleUpdateCategory = (newVal) => {
45+
if(category === newVal) return;
46+
scrollRef.current.refresh();
47+
updateCategory(newVal);
48+
};
49+
50+
const handleUpdateAlpha = (newVal) => {
51+
if(alpha === newVal) return;
52+
scrollRef.current.refresh();
53+
updateAlpha(newVal);
54+
};
55+
56+
const renderSingerList = () => {
57+
const {singerList} = props;
5158

5259
return (
5360
<List>
5461
{
5562
singerList.toJS().map((item, index) => {
5663
return (
57-
<ListItem key={item.accountId+""+index} onClick={() => this.enterDetail(item.id)}>
64+
<ListItem key={item.accountId+""+index} onClick={() => enterDetail(item.id)}>
5865
<div className="img_wrapper">
5966
<LazyLoad placeholder={<img width="100%" height="100%" src={require('./singer.png')} alt="music"/>}>
6067
<img src={`${item.picUrl}?param=300x300`} width="100%" height="100%" alt="music"/>
@@ -67,35 +74,31 @@ class Singers extends PureComponent{
6774
}
6875
</List>
6976
)
70-
}
71-
render() {
72-
const { alpha, category, enterLoading, songsCount, pullUpLoading,pullDownLoading } = this.props;
73-
74-
return (
75-
<div>
76-
{/* 对于better-scroll来讲，其作用的元素外面必须要有一个尺寸确定的容器包裹，因此设置xxxContainer */}
77-
<NavContainer>
78-
<Horizen title={"分类(默认热门):"} list={ categoryTypes } handleClick={(v) => this.handleUpdateCategory(v)} oldVal={category}></Horizen>
79-
<Horizen title={"首字母:"} list={ alphaTypes } handleClick={(v) => this.handleUpdateAlpha(v)} oldVal={alpha}></Horizen>
80-
</NavContainer>
81-
<ListContainer play={songsCount}>
82-
<Scroll
83-
onScroll = {() => forceCheck() }
84-
pullUp={() => this.handlePullUp()}
85-
pullDown = {() => this.handlePullDown()}
86-
ref={Singers.scrollChild}
87-
pullUpLoading = { pullUpLoading }
88-
pullDownLoading = { pullDownLoading }
89-
>
90-
{ this.renderSingerList() }
91-
</Scroll>
92-
</ListContainer>
93-
{/* 入场加载动画 */}
94-
{ enterLoading ? <EnterLoading><Loading></Loading></EnterLoading> : null}
95-
{ renderRoutes(this.props.route.routes) }
96-
</div>
97-
)
98-
}
77+
};
78+
return (
79+
<div>
80+
{/* 对于better-scroll来讲，其作用的元素外面必须要有一个尺寸确定的容器包裹，因此设置xxxContainer */}
81+
<NavContainer>
82+
<Horizen title={"分类(默认热门):"} list={ categoryTypes } handleClick={(v) => handleUpdateCategory(v)} oldVal={category}></Horizen>
83+
<Horizen title={"首字母:"} list={ alphaTypes } handleClick={(v) => handleUpdateAlpha(v)} oldVal={alpha}></Horizen>
84+
</NavContainer>
85+
<ListContainer play={songsCount}>
86+
<Scroll
87+
onScroll = {() => forceCheck() }
88+
pullUp={ handlePullUp }
89+
pullDown = { handlePullDown }
90+
ref={ scrollRef }
91+
pullUpLoading = { pullUpLoading }
92+
pullDownLoading = { pullDownLoading }
93+
>
94+
{ renderSingerList() }
95+
</Scroll>
96+
</ListContainer>
97+
{/* 入场加载动画 */}
98+
{ enterLoading ? <EnterLoading><Loading></Loading></EnterLoading> : null}
99+
{ renderRoutes(props.route.routes) }
100+
</div>
101+
)
99102
}
100103
const mapStateToProps = (state) => ({
101104
alpha: state.getIn(['singers', 'alpha']),
@@ -113,14 +116,12 @@ const mapDispatchToProps = (dispatch) => {
113116
dispatch(getHotSingerList());
114117
},
115118
updateCategory(newVal) {
116-
Singers.scrollChild.current.refresh();
117119
dispatch(changeCategory(newVal));
118120
dispatch(changePageCount(0));
119121
dispatch(changeEnterLoading(true));
120122
dispatch(getSingerList());
121123
},
122124
updateAlpha(newVal) {
123-
Singers.scrollChild.current.refresh();
124125
dispatch(changeAlpha(newVal));
125126
dispatch(changePageCount(0));
126127
dispatch(changeEnterLoading(true));

‎src/baseUI/scroll/index.js‎

Lines changed: 83 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,52 @@ export const PullDownLoading = styled.div`
3131
z-index: 100;
3232
`
3333

34+
// 下为问题代码，以此为鉴
35+
// useEffect(() => {
36+
// if(bScroll) return;
37+
// const scroll = new BScroll(scrollContaninerRef.current, {
38+
// scrollX: direction === "horizental",
39+
// scrollY: direction === "vertical",
40+
// probeType: 3,
41+
// click: click,
42+
// bounce:{
43+
// top: bounceTop,
44+
// bottom: bounceBottom
45+
// }
46+
// });
47+
// setBScroll(scroll);
48+
// if(pullUp) {
49+
// scroll.on('scrollEnd', () => {
50+
// //判断是否滑动到了底部
51+
// if(scroll.y <= scroll.maxScrollY + 100){
52+
// pullUp();
53+
// }
54+
// });
55+
// }
56+
// if(pullDown) {
57+
// scroll.on('touchEnd', (pos) => {
58+
// //判断用户的下拉动作
59+
// if(pos.y > 50) {
60+
// debounce(pullDown, 0)();
61+
// }
62+
// });
63+
// }
64+
65+
// if(onScroll) {
66+
// scroll.on('scroll', (scroll) => {
67+
// onScroll(scroll);
68+
// })
69+
// }
70+
71+
// if(refresh) {
72+
// scroll.refresh();
73+
// }
74+
// return () => {
75+
// scroll.off('scroll');
76+
// setBScroll(null);
77+
// }
78+
// // eslint-disable-next-line
79+
// }, []);
3480
const Scroll = forwardRef((props, ref) => {
3581
const [bScroll, setBScroll] = useState();
3682

@@ -53,44 +99,54 @@ const Scroll = forwardRef((props, ref) => {
5399
}
54100
});
55101
setBScroll(scroll);
56-
if(pullUp) {
57-
scroll.on('scrollEnd', () => {
58-
//判断是否滑动到了底部
59-
if(scroll.y <= scroll.maxScrollY + 100){
60-
pullUp();
61-
}
62-
});
63-
}
64-
if(pullDown) {
65-
scroll.on('touchEnd', (pos) => {
66-
//判断用户的下拉动作
67-
if(pos.y > 50) {
68-
debounce(pullDown, 0)();
69-
}
70-
});
102+
return () => {
103+
setBScroll(null);
71104
}
105+
// eslint-disable-next-line
106+
}, []);
72107

73-
if(onScroll) {
74-
scroll.on('scroll', (scroll) => {
75-
onScroll(scroll);
76-
})
108+
useEffect(() => {
109+
if(!bScroll || !onScroll) return;
110+
bScroll.on('scroll', (scroll) => {
111+
onScroll(scroll);
112+
})
113+
return () => {
114+
bScroll.off('scroll');
77115
}
116+
}, [onScroll, bScroll]);
78117

79-
if(refresh) {
80-
scroll.refresh();
118+
useEffect(() => {
119+
if(!bScroll || !pullUp) return;
120+
bScroll.on('scrollEnd', () => {
121+
//判断是否滑动到了底部
122+
if(bScroll.y <= bScroll.maxScrollY + 100){
123+
debounce(pullUp, 200)();
124+
}
125+
});
126+
return () => {
127+
bScroll.off('scrollEnd');
81128
}
129+
}, [pullUp, bScroll]);
130+
131+
useEffect(() => {
132+
if(!bScroll || !pullDown) return;
133+
bScroll.on('touchEnd', (pos) => {
134+
//判断用户的下拉动作
135+
if(pos.y > 50) {
136+
debounce(pullDown, 200)();
137+
}
138+
});
82139
return () => {
83-
scroll.off('scroll');
84-
setBScroll(null);
140+
bScroll.off('touchEnd');
85141
}
86-
// eslint-disable-next-line
87-
}, []);
142+
}, [pullDown, bScroll]);
143+
88144

89145
useEffect(() => {
90146
if(refresh && bScroll){
91147
bScroll.refresh();
92148
}
93-
})
149+
});
94150

95151
useImperativeHandle(ref, () => ({
96152
refresh() {
@@ -139,7 +195,4 @@ Scroll.propTypes = {
139195
bounceBottom: PropTypes.bool//是否支持向上吸顶
140196
};
141197

142-
143-
144-
145-
export default React.memo(Scroll);
198+
export default Scroll;

0 commit comments

Comments
 (0)