当使用push的时候,会向 history 栈添加一个新的记录,这个时候,再次添加一个完全相同的路由的时候,就不会再次刷新了. 没有耐心的可以直接看第九种方式,绝绝子,适用所有场景. 解决办法有这么几种: 1. 添加activated函数。 activated(){ 在这里插入代码片 }
问题背景工作项目中两个页面模块基本业务流程和交互都差不多,因此决定用共用同一套组件,通过设置不同的路由,跳转到同一个模块,在模块内部通过路由的参数作区分,现在面临两个问题:
1)不同路由跳转后,组件只会重新渲染(render),而不会整个组件重新构建,即不会重走constructor等生命周期函数
2)共用reducer,需要解决数据相互解耦合,独立问题
路由问题原因和解决方案
react组件是根据diff算法来决定是否更新组件,不同路由跳转,如果组件props没有变化,则认为是同一个组件内部的状态更新,不会重建组件,需要每次跳转需要赋予组件不同的props,在路由组件最上层加上key:
const mapStateToProps = (state, props) =>({
otherData: fun(state),
key: props.location.state.from, // 将路由参数中的from赋予key,或者props.location.state.pathname
})
export default connect(mapStateToProps)(MyComponent)
不同mapStateToProps绑定函数时的组件注入key的写法:
export default (props)=><User {...props} key={props.location.state.from} />
将路由参数from赋予给组件props的key,当不同路由跳转时,组件有了不同的key,因此实现了组件的构建更新
diff算法
diff算法是react的核心思想。当你添加了一个key之后,因为react在重新渲染时,会比较组件是否发生了变更,diff算法包括组件diff,element diff,还有dom树diff。有了key作为标识,react能很快的计算出是否需要重新渲染,如果没有添加key,默认就重新渲染。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)