1.0 state的改变以 及 props的改变 都会导致组件的重新渲染,所以要考虑性能问题,充分利用导航钩子
2.0 路由的编程式导航( this.props.localtion.push),或者 <Link > 的方式进行路由切换的动作,都会导致对应的组件创建,渲染,销毁等行为,比较消耗性能,如果是同一路由多次点击,应该要做一个判断,是同一路由下就不做路由切换动作,提高性能,实习思路就是在当前嵌套路由的最外层的组件的 componentDidUpdate 钩子中将当前路由存储起来,当再次点击的时候进行对比,如果还是同一个路由,那么就不进行路由的切换动作(即编程式导航)
// Home组件实现代码如下
import React, { Component } from 'react'
// 导入路由
import { Route } from 'react-router-dom'
// 导入子组件
import Index from '../Index'
import HouseLists from '../HouseLists'
import News from '../News'
import Profile from '../Profile'
// 按需导入anted-mobile的组件
import { TabBar } from 'antd-mobile'
// 模块化导入样式
import style from './index.module.scss'
class Home extends Component {
constructor(props) {
super(props)
this.state = {
selectedTab: props.location.pathname
}
}
// tabs数组
TABS = [
{
title: '首页',
icon: 'icon-index',
path: '/home'
},
{
title: '找房',
icon: 'icon-findHouse',
path: '/home/list'
},
{
title: '资讯',
icon: 'icon-info',
path: '/home/news'
},
{
title: '我的',
icon: 'icon-my',
path: '/home/profile'
}
]
// 渲染 TabBar
renderTabBar = () => {
return (
<TabBar tintColor="#21B97A" noRenderContent>
{this.TABS.map(item => {
return (
<TabBar.Item
icon={<i className={`iconfont ${item.icon}`}></i>}
selectedIcon={<i className={`iconfont ${item.icon}`}></i>}
title={item.title}
key={item.path}
selected={this.state.selectedTab === item.path}
onPress={() => {
// this.setState({
// selectedTab: item.path
// })
// 通过编程式导航实现路由切换
if (this.props.location.pathname !== item.path) {
this.props.history.push(item.path)
}
}}
></TabBar.Item>
)
})}
</TabBar>
)
}
// 方式二: 通过钩子,判断两次点击的是否为同一路由,同一路由,就不必修改 state中的值,因为修改了会从新渲染,很消耗性能
componentDidUpdate(preProps) {
if (preProps.location.pathname !== this.props.location.pathname) {
this.setState({
selectedTab: this.props.location.pathname
})
}
}
render() {
return (
<div className={style.home}>
{/* Route 占位以及路由匹配 */}
<Route exact path="/home" component={Index} />
<Route path="/home/list" component={HouseLists} />
<Route path="/home/news" component={News} />
<Route path="/home/profile" component={Profile} />
<div className={style.tabbar}>{this.renderTabBar()}</div>
</div>
)
}
}
export default Home