解決react組件渲染兩次的問題
react組件渲染兩次
可能會有人問，問什么我的組件明明是就讓渲染一次，但是實際上卻渲染兩次呢？其實我也遇到了這個問題，那么下面我提出一種解決這個問題的一種方法。
如果你使用了react-router低于4.x版本中的hashHistory，那么問題就來了，出現(xiàn)這種情況的原因是因為router中進行了一次push和一次pop，所以出現(xiàn)兩次渲染，
你只需要在shouldComponentUpdate()這個生命周期鉤子中做一個判斷就好了：
return (this.props.router.location.action === 'PUSH')
或者
return (this.props.router.location.action === 'POP')；
只要二選一即可解決渲染兩次的問題。
react總結之避免不必要的重復渲染
類組件PureComponent
適當?shù)氖褂肞ureComponent創(chuàng)建組件可以提高性能,在使用類組件的時侯,繼承PureComponent組件,它是依賴于傳遞給組件的props進行淺比較,當props發(fā)生改變的時候,才會重新渲染組件,既然是淺比較,那么在state和props每次都發(fā)生改變的額時候,還要使用PureComponent就會對性能產(chǎn)生負面的影響了!
React.memo()
React.memo()和PureComponent很相似,PureComponent是一個類,React.memo()是一個函數(shù)組件,它有兩個參數(shù),第一個參數(shù)是純函數(shù)的組件,第二個參數(shù)是true或者false,用于控制是否刷新組件!
shouldComponmentUpdate
類組件的的生命周期函數(shù),當返回值是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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了React中的render何時執(zhí)行過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Context提供了一個無需為每層組件手動添加props，就能在組件樹間進行數(shù)據(jù)傳遞的方法。在一個典型的?React?應用中，數(shù)據(jù)是通過props屬性自上而下（由父及子）進行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的2022-12-12
這篇文章主要介紹了React之使用useState異步刷新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了淺談react前后端同構渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了如何在React中Redux原理,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了react ant Design手動設置表單的值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Fiber 可以理解為一個執(zhí)行單元，每次執(zhí)行完一個執(zhí)行單元，React Fiber就會檢查還剩多少時間，如果沒有時間則將控制權讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React Fiber架構原理剖析,需要的朋友可以參考下2022-11-11
VSCode 配置React Native開發(fā)環(huán)境的方法
本篇文章主要介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了React?如何向url中添加參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數(shù)的組合2022-10-10