09月23, 2019

解决 react 页面渲染两次

React 开发使用react-router 4.2.2 版本(react-router低于4.x版本中的hashHistory 会出现此问题),发现页面刷新之后会渲染两次,浪费资源、性能

那么问题就来了,出现这种情况的原因是因为router中进行了一次push和一次pop,所以出现两次渲染,你只需要在()这个生命周期钩子中做一个判断就好了:

shouldComponentUpdate(){
     return (this.props.router.location.action === 'PUSH')
}

或者

shouldComponentUpdate(){
     return (this.props.router.location.action === 'POP')
}

只要二选一即可解决渲染两次的问题。

本文链接:http://h88829.top/post/react-render.html

-- EOF --

Comments