使用useMemo优化性能
使用useMemo优化性能:
import React, { Suspense, useMemo } from 'react'
import { Switch, Route } from 'react-router-dom'
import { connect } from 'react-redux'
import Loading from '../../../components/light/Loading'
import Header from './Header'
import Nav from './Nav'
function List(props) {
const { router } = props
// 只有router变化时才会重新渲染listDom,useMemo函数可以起到性能优化的作用
const listDom = useMemo(() => {
const listDom = []
const listRender = (arr) => {
arr.forEach((item) => {
if (item.children) {
listRender(item.children)
} else {
listDom.push(
<Route
key={item.path}
path={item.path}
component={item.component}
></Route>
)
}
})
}
listRender(router.toJS())
return listDom
}, [router])
return (
<div className="m-list">
<Header></Header>
<div className="m-list-info">
<Nav></Nav>
<Suspense fallback={<Loading isLazyLoading={true}></Loading>}>
<Switch>{listDom}</Switch>
</Suspense>
</div>
</div>
)
}
const mapStateToProps = (state) => {
return {
router: state.getIn(['light', 'router']),
theme: state.getIn(['light', 'theme']),
}
}
const mapDispatchToProps = (dispatch) => {
return {
onSetState(key, value) {
dispatch({ type: 'SET_LIGHT_STATE', key, value })
},
onDispatch(action) {
dispatch(action)
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(List)
使用useEffect也可以优化性能:
import React, { Suspense, useEffect, useState} from 'react'
import { Switch, Route } from 'react-router-dom'
import { connect } from 'react-redux'
import Loading from '../../../components/light/Loading'
import Header from './Header'
import Nav from './Nav'
function List(props) {
const [listDom, setListDom] = useState([])
const { router } = props
// 只有router变化时才会重新渲染listDom,useEffect函数可以起到性能优化的作用
useEffect(() => {
const listDom = []
const listRender = (arr) => {
arr.forEach((item) => {
if (item.children) {
listRender(item.children)
} else {
listDom.push(
<Route
key={item.path}
path={item.path}
component={item.component}
></Route>
)
}
})
}
listRender(router.toJS())
setListDom(listDom)
}, [router])
return (
<div className="m-list">
<Header></Header>
<div className="m-list-info">
<Nav></Nav>
<Suspense fallback={<Loading isLazyLoading={true}></Loading>}>
<Switch>{listDom}</Switch>
</Suspense>
</div>
</div>
)
}
const mapStateToProps = (state) => {
return {
router: state.getIn(['light', 'router']),
theme: state.getIn(['light', 'theme']),
}
}
const mapDispatchToProps = (dispatch) => {
return {
onSetState(key, value) {
dispatch({ type: 'SET_LIGHT_STATE', key, value })
},
onDispatch(action) {
dispatch(action)
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(List)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步