解决react组件渲染两次的问题
react组件渲染两次
可能会有人问，问什么我的组件明明是就让渲染一次，但是实际上却渲染两次呢？其实我也遇到了这个问题，那么下面我提出一种解决这个问题的一种方法。
如果你使用了react-router低于4.x版本中的hashHistory，那么问题就来了，出现这种情况的原因是因为router中进行了一次push和一次pop，所以出现两次渲染，
你只需要在shouldComponentUpdate()这个生命周期钩子中做一个判断就好了：
return (this.props.router.location.action === 'PUSH')
或者
return (this.props.router.location.action === 'POP')；
只要二选一即可解决渲染两次的问题。
react总结之避免不必要的重复渲染
类组件PureComponent
适当的使用PureComponent创建组件可以提高性能,在使用类组件的时侯,继承PureComponent组件,它是依赖于传递给组件的props进行浅比较,当props发生改变的时候,才会重新渲染组件,既然是浅比较,那么在state和props每次都发生改变的额时候,还要使用PureComponent就会对性能产生负面的影响了!
React.memo()
React.memo()和PureComponent很相似,PureComponent是一个类,React.memo()是一个函数组件,它有两个参数,第一个参数是纯函数的组件,第二个参数是true或者false,用于控制是否刷新组件!
shouldComponmentUpdate
类组件的的生命周期函数,当返回值是false的时候,视图不做更新,否则更新!
使用插件seamless-immutable
1.引入import Immutable from 'seamless-immutable';
2.初始化state
this.state = {
list: Immutable([]);
}3.修改state
this.setState({
list: Immutable(items);
})使用插件pure-render-decorator
import React from 'react';
import pureRender from 'pure-render-decorator';
// es7才支持装饰器,这边需要配置babel
@pureRender
class List extends React.Component {
render() {
const {list} = this.props;
return (
<>
{
list.map((item) => {
return (
<div key={item.id}>
<div>{item.code}</div>
</div>
);
})
}
</>
);
}
}
export default List;
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天讲一下如何实现自定义标题栏组件，我们都知道RN有一个优点就是可以组件化，在需要使用该组件的地方直接引用并传递一些参数就可以了，这种方式确实提高了开发效率。对React Native自定义标题栏组件的实现方法感兴趣的朋友参考下2017-01-01
这篇文章主要为大家介绍了React JSX基础语法教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家详细介绍了react优雅处理多条件鼠标拖拽位移，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
捕获异常是来定位你错误代码的。本文主要介绍了 React如何捕获异常，你知道多少种方法，ErrorBoundary，ErrorBoundary-try-catch等等。本文就来详细的介绍一下2021-06-06
详解React-Native全球化多语言切换工具库react-native-i18n
这篇文章主要介绍了详解React-Native全球化语言切换工具库react-native-i18n,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了webpack打包react项目的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
记录React使用connect后,ref.current为null问题及解决
记录React使用connect后,ref.current为null问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了React配置代理方式(proxy),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了react中useState改变值不渲染的解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
React的createElement和render手写实现示例
这篇文章主要为大家介绍了React的createElement和render手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最新评论