react项目中遇到的坑~

648 阅读1分钟

技术栈: react、react-router(4.X)、withRouter

1. 组件走两次生命周期?

问题1:

描述: 路由跳转至组件A => componentWillMount ... componentWillUnMount => componentWillMount... => render()

即:组件A经历组件创建 => 销毁 => 创建.... 定位好久好久,最开始定位为 路由问题,写了测试组件无此问题,最终定位到

问题的原因是:使用connect包含 withRouter

问题2

描述: 从A页面跳转到B页面,再从B页面(B组件)回退到A页面

  • 方式1:点击浏览器的回退按钮时,子组件重新走一次生命周期;
  • 方式2:在B组件中使用Link方式,不存在问题;

问题定位:

B组件结构: 路由配置、子组件

switch设置key

问题分析:
浏览器回退(即props改变) => B组件componentWillReceiveProps 中id改变...  => B组件render = id改变 =>  重新生成路由配置 => 子组件渲染 => 回退

link方式B组件不重新render

解决:componnetWillReceiveProps 中增加id改变条件~

参考文章

connect and withRouter issue

withRouter用法

github issuse