快捷導(dǎo)航

解決react組件渲染兩次的問題

更新時間：2022年08月04日 11:35:11 作者：神才飛揚(yáng)

這篇文章主要介紹了解決react組件渲染兩次的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

react組件渲染兩次

可能會有人問，問什么我的組件明明是就讓渲染一次，但是實(shí)際上卻渲染兩次呢？其實(shí)我也遇到了這個問題，那么下面我提出一種解決這個問題的一種方法。

如果你使用了react-router低于4.x版本中的hashHistory，那么問題就來了，出現(xiàn)這種情況的原因是因?yàn)閞outer中進(jìn)行了一次push和一次pop，所以出現(xiàn)兩次渲染，

你只需要在shouldComponentUpdate()這個生命周期鉤子中做一個判斷就好了：

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

或者

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

只要二選一即可解決渲染兩次的問題。

react總結(jié)之避免不必要的重復(fù)渲染

類組件PureComponent

適當(dāng)?shù)氖褂肞ureComponent創(chuàng)建組件可以提高性能,在使用類組件的時侯,繼承PureComponent組件,它是依賴于傳遞給組件的props進(jìn)行淺比較,當(dāng)props發(fā)生改變的時候,才會重新渲染組件,既然是淺比較,那么在state和props每次都發(fā)生改變的額時候,還要使用PureComponent就會對性能產(chǎn)生負(fù)面的影響了!

React.memo()

React.memo()和PureComponent很相似,PureComponent是一個類,React.memo()是一個函數(shù)組件,它有兩個參數(shù),第一個參數(shù)是純函數(shù)的組件,第二個參數(shù)是true或者false,用于控制是否刷新組件!

shouldComponmentUpdate

類組件的的生命周期函數(shù),當(dāng)返回值是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;

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: