Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 84b387d

Browse files
mydearxymmydearxym
committed
refactor(init): fallback from constructor -> componentDidMount
to avoid HMR issue
1 parent f2e4cbb commit 84b387d

File tree

17 files changed

+166
-130
lines changed

17 files changed

+166
-130
lines changed

‎components/PostItem/index.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,17 @@ const PostItem = ({
2828
accountInfo,
2929
}) => {
3030
// debug('customization --> ', customization)
31-
const {
32-
customization: { contentsLayout, contentDivider },
33-
} = accountInfo
31+
const { customization: { contentsLayout, contentDivider } } = accountInfo
3432

35-
debug('entry --> ', entry)
36-
debug('active --> ', active)
33+
/*
34+
debug('entry --> ', entry)
35+
debug('active --> ', active)
3736
38-
debug('accountInfo.isLogin --> ', accountInfo.isLogin)
39-
debug('accountInfo.markViewed --> ', accountInfo.customization.markViewed)
40-
debug('get opacity: ', getOpacity(entry, active, accountInfo))
41-
debug('=========================================================')
37+
debug('accountInfo.isLogin --> ', accountInfo.isLogin)
38+
debug('accountInfo.markViewed --> ', accountInfo.customization.markViewed)
39+
debug('get opacity: ', getOpacity(entry, active, accountInfo))
40+
debug('=========================================================')
41+
*/
4242

4343
return (
4444
<Wrapper

‎containers/CheatsheetThread/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@ const renderView = (cheatsheetData, type, communityRaw) => {
4242
// TODO: NOT_FOUND, parse_error
4343

4444
class CheatsheetThreadContainer extends React.Component {
45-
constructor(props) {
46-
super(props)
47-
48-
const { cheatsheetThread } = props
45+
componentDidMount() {
46+
const { cheatsheetThread } = this.props
4947
logic.init(cheatsheetThread)
50-
}
5148

52-
componentDidMount() {
5349
Prism.highlightAll()
5450
setTimeout(() => {
5551
Prism.highlightAll()
5652
}, 1000)
5753
}
5854

55+
componentWillUnmount() {
56+
logic.uninit()
57+
}
58+
5959
render() {
6060
const { cheatsheetThread } = this.props
6161
const { cheatsheetData, curView, curCommunity } = cheatsheetThread

‎containers/CheatsheetThread/logic.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,13 +99,14 @@ const ErrSolver = [
9999
]
100100

101101
export function init(_store) {
102-
if (store) {
103-
return getCheatsheet()
104-
}
105102
store = _store
106103

107104
debug(store)
108105
if (sub$) sub$.unsubscribe()
109106
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
110107
getCheatsheet()
111108
}
109+
110+
export function uninit() {
111+
if (sub$) sub$.unsubscribe()
112+
}

‎containers/JobsThread/index.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@ const debug = makeDebugger('C:JobsThread')
3737
/* eslint-enable no-unused-vars */
3838

3939
class JobsThreadContainer extends React.Component {
40-
constructor(props) {
41-
super(props)
42-
43-
const { jobsThread } = props
40+
componentDidMount() {
41+
const { jobsThread } = this.props
4442
logic.init(jobsThread)
4543
}
4644

45+
componentWillUnmount() {
46+
logic.uninit()
47+
}
48+
4749
render() {
4850
const { jobsThread } = this.props
4951

‎containers/JobsThread/logic.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const sr71$ = new SR71({
2424
EVENT.REFRESH_JOBS,
2525
EVENT.PREVIEW_CLOSED,
2626
EVENT.COMMUNITY_CHANGE,
27+
EVENT.TABBER_CHANGE,
2728
],
2829
})
2930
/* eslint-disable no-unused-vars */
@@ -33,12 +34,7 @@ const debug = makeDebugger('L:JobsThread')
3334
let store = null
3435
let sub$ = null
3536

36-
const validFilter = R.pickBy(
37-
R.compose(
38-
R.not,
39-
R.isEmpty
40-
)
41-
)
37+
const validFilter = R.pickBy(R.compose(R.not, R.isEmpty))
4238

4339
export const inAnchor = () => store.setHeaderFix(false)
4440
export const outAnchor = () => store.setHeaderFix(true)
@@ -103,6 +99,7 @@ const DataSolver = [
10399
{
104100
match: asyncRes('pagedJobs'),
105101
action: ({ pagedJobs }) => {
102+
debug('pagedJobs --> ', pagedJobs)
106103
let curView = TYPE.RESULT
107104
if (pagedJobs.entries.length === 0) {
108105
curView = TYPE.RESULT_EMPTY
@@ -118,6 +115,10 @@ const DataSolver = [
118115
match: asyncRes(EVENT.COMMUNITY_CHANGE),
119116
action: () => loadJobs(),
120117
},
118+
{
119+
match: asyncRes(EVENT.TABBER_CHANGE),
120+
action: () => loadJobs(),
121+
},
121122
{
122123
match: asyncRes(EVENT.REFRESH_JOBS),
123124
action: () => loadJobs(),
@@ -150,14 +151,12 @@ const ErrSolver = [
150151
]
151152

152153
export function init(_store) {
153-
if (store) {
154-
return false // loadIfNeed()
155-
}
156154
store = _store
157155

158156
if (sub$) sub$.unsubscribe()
159157
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
158+
}
160159

161-
// loadIfNeed()
162-
/* loadJobs() */
160+
export function uninit() {
161+
if (sub$) sub$.unsubscribe()
163162
}

‎containers/PostsThread/index.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,17 @@ const LabelText = {
3939
city: '发布同城帖',
4040
}
4141

42+
// see https://stackoverflow.com/questions/38137740/which-kinds-of-initialization-is-more-appropriate-in-constructor-vs-componentwil/
4243
class PostsThreadContainer extends React.Component {
43-
constructor(props) {
44-
super(props)
45-
const { postsThread } = props
44+
componentDidMount() {
45+
const { postsThread } = this.props
4646
logic.init(postsThread)
4747
}
4848

49+
componentWillUnmount() {
50+
logic.uninit()
51+
}
52+
4953
render() {
5054
const { postsThread } = this.props
5155
const {

‎containers/PostsThread/logic.js‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,7 @@ let store = null
3535
let sub$ = null
3636

3737
// TODO: move to utils
38-
const validFilter = R.pickBy(
39-
R.compose(
40-
R.not,
41-
R.isEmpty
42-
)
43-
)
38+
const validFilter = R.pickBy(R.compose(R.not, R.isEmpty))
4439

4540
export const inAnchor = () => store.setHeaderFix(false)
4641
export const outAnchor = () => store.setHeaderFix(true)
@@ -73,7 +68,6 @@ export function loadPosts(page = 1) {
7368
args.filter = validFilter(args.filter)
7469
scrollIntoEle(TYPE.APP_HEADER_ID)
7570

76-
debug('loadPosts args: ', args)
7771
sr71$.query(S.pagedPosts, args)
7872
store.markRoute({ page })
7973
}
@@ -130,7 +124,7 @@ const DataSolver = [
130124
{
131125
match: asyncRes('pagedPosts'),
132126
action: ({ pagedPosts }) => {
133-
console.log('pagedPosts --> ', pagedPosts)
127+
debug('pagedPosts: ', pagedPosts)
134128
let curView = TYPE.RESULT
135129
if (pagedPosts.totalCount === 0) {
136130
curView = TYPE.RESULT_EMPTY
@@ -184,19 +178,12 @@ const ErrSolver = [
184178
},
185179
]
186180

187-
const loadIfNeed = () => {
188-
if (store.pagedPostsData.totalCount === 0) {
189-
loadPosts()
190-
}
191-
}
192-
193181
export function init(_store) {
194-
if (store) {
195-
return loadIfNeed()
196-
}
197182
store = _store
183+
// if (sub$) sub$.unsubscribe()
184+
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
185+
}
198186

187+
export function uninit() {
199188
if (sub$) sub$.unsubscribe()
200-
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
201-
loadIfNeed()
202189
}

‎containers/ReposThread/index.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,15 @@ const debug = makeDebugger('C:ReposThread')
3737
/* eslint-enable no-unused-vars */
3838

3939
class ReposThreadContainer extends React.Component {
40-
constructor(props) {
41-
super(props)
42-
43-
const { reposThread } = props
40+
componentDidMount() {
41+
const { reposThread } = this.props
4442
logic.init(reposThread)
4543
}
4644

45+
componentWillUnmount() {
46+
logic.uninit()
47+
}
48+
4749
render() {
4850
const { reposThread } = this.props
4951

‎containers/ReposThread/logic.js‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const sr71$ = new SR71({
2020
resv_event: [
2121
EVENT.REFRESH_REPOS,
2222
EVENT.PREVIEW_CLOSED,
23-
// EVENT.COMMUNITY_CHANGE,
23+
EVENT.COMMUNITY_CHANGE,
24+
EVENT.TABBER_CHANGE,
2425
],
2526
})
2627
let sub$ = null
@@ -31,12 +32,7 @@ const debug = makeDebugger('L:ReposThread')
3132

3233
let store = null
3334

34-
const validFilter = R.pickBy(
35-
R.compose(
36-
R.not,
37-
R.isEmpty
38-
)
39-
)
35+
const validFilter = R.pickBy(R.compose(R.not, R.isEmpty))
4036

4137
export const inAnchor = () => store.setHeaderFix(false)
4238
export const outAnchor = () => store.setHeaderFix(true)
@@ -108,6 +104,14 @@ const DataSolver = [
108104
match: asyncRes('partialTags'),
109105
action: ({ partialTags: tags }) => store.markState({ tags }),
110106
},
107+
{
108+
match: asyncRes(EVENT.COMMUNITY_CHANGE),
109+
action: () => loadRepos(),
110+
},
111+
{
112+
match: asyncRes(EVENT.TABBER_CHANGE),
113+
action: () => loadRepos(),
114+
},
111115
{
112116
match: asyncRes(EVENT.REFRESH_REPOS),
113117
action: () => loadRepos(),
@@ -119,26 +123,13 @@ const DataSolver = [
119123
]
120124
const ErrSolver = []
121125

122-
const loadIfNeed = () => {
123-
/* loadVideos() */
124-
/* console.log('store.pagedVideos.entries --> ', store.pagedVideosData.entries) */
125-
loadRepos()
126-
/*
127-
if (R.isEmpty(store.pagedReposData.entries)) {
128-
loadRepos()
129-
}
130-
*/
131-
}
132-
133126
export function init(_store) {
134-
if (store) {
135-
return loadIfNeed()
136-
}
137127
store = _store
138128

139-
debug(store)
140129
if (sub$) sub$.unsubscribe()
141130
sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
131+
}
142132

143-
loadIfNeed()
133+
export function uninit() {
134+
if (sub$) sub$.unsubscribe()
144135
}

‎containers/UsersThread/index.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const debug = makeDebugger('C:UsersThread')
2020
let GeoMapSSR = null
2121

2222
class UsersThreadContainer extends React.Component {
23+
/*
2324
constructor(props) {
2425
super(props)
2526
@@ -32,6 +33,23 @@ class UsersThreadContainer extends React.Component {
3233
ssr: false,
3334
})
3435
}
36+
*/
37+
38+
componentDidMount() {
39+
const { usersThread } = this.props
40+
41+
logic.init(usersThread)
42+
43+
GeoMapSSR = dynamic({
44+
loader: () => import('./GeoMap.js'),
45+
loading: () => <MapLoading />,
46+
ssr: false,
47+
})
48+
}
49+
50+
componentWillUnmount() {
51+
logic.uninit()
52+
}
3553

3654
render() {
3755
const { usersThread } = this.props

0 commit comments

Comments
 (0)