用react 开发时,我们一般会写一个layout层,同事在layout层做了动画,大致代码如下
<TransitionGroup className={styles['route-ani-wrap']} childFactory=
{this._getChild}>
<CSSTransition key={location.pathname} timeout={300}>
{children}
</CSSTransition>
</TransitionGroup>
效果挺好,不过这里要说的是其产生的齐天大坑。
我们项目是采用umi创建的,根据官方文档实现的ssr 。上面动态效果导致了服务端获取数据方法getInitialProps执行两次的现象。我打了debugger, 发现渲染了两个对象,渲染界面如图:
故猜测实现动画的插件渲染了两个实例,导致getInitialProps执行了两次。