react组件渲染两次的问题解决方法

忘是亡心i 2023-09-26 19:58 164阅读 0赞

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 (

\{item.code\}

);  
\})  
\}  
</>  
);  
\}  
\}  
export default List;  
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。