React组件渲染两次，是组件生命周期钩子设置不当吗？

本文共计609个文字，预计阅读时间需要3分钟。

目录：React组件渲染两次，总结之避免不必要的重复渲染

1. React组件渲染两次的原因

2.使用PureComponent

3.使用seamless-immutable插件

4.使用pure-render-decorator插件

5.组件渲染两次的潜在问题

目录

• react组件渲染两次
• react总结之避免不必要的重复渲染
• 类组件PureComponent
• 使用插件seamless-immutable
• 使用插件pure-render-decorator

react组件渲染两次

可能会有人问，问什么我的组件明明是就让渲染一次，但是实际上却渲染两次呢？其实我也遇到了这个问题，那么下面我提出一种解决这个问题的一种方法。

如果你使用了react-router低于4.x版本中的hashHistory，那么问题就来了，出现这种情况的原因是因为router中进行了一次push和一次pop，所以出现两次渲染，

你只需要在shouldComponentUpdate()这个生命周期钩子中做一个判断就好了：

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

或者

return (this.props.router.location.action === 'POP')；

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