React.PureComponent不執行shouldComponentUpdate

我可能失去了一些東西，但我有這樣React.PureComponent不執行shouldComponentUpdate

export default MyComponent extends React.PureComponent { 
    // ... 
}

當MyComponent的是另一個部件的一部分組件渲染方法，MyComponent的重新呈現每一個父渲染時間，甚至當道具/狀態不變時。所以它看起來從React.Component變爲React.PureComponent沒有使組件「純」。

我嘗試添加

console.info(this.shouldComponentUpdate)

的組件方法之一內，和它說，這是不確定的。是不是React.PureComponent應該增加一個淺 - 比較shouldComponentUpdate方法？

現在，這已經發生了與之反應15.5.4和15.6.0

來源

2017-06-14 henit

一個PureComponent不直接申報shouldComponentUpdate。您無法通過this.shouldComponentUpdate訪問它。在陣營的源代碼中有一個shouldUpdate變量：

（下面的源代碼被簡化）

// default is true 
var shouldUpdate = true; 

if (inst.shouldComponentUpdate) { 
    shouldUpdate = inst.shouldComponentUpdate(
    nextProps, 
    nextState, 
    nextContext, 
); 
} else { 
    // if it's a PureComponent 
    if (this._compositeType === ReactCompositeComponentTypes.PureClass) { 
    shouldUpdate = 
     !shallowEqual(prevProps, nextProps) || 
     !shallowEqual(inst.state, nextState); 
    } 
} 

// ... 

if (shouldUpdate) { 
    // re-render .. 
}

因爲它只是淺淺的平等，代碼波紋管返回false，你會得到一個重新渲染：

const propA = { foo: 'bar' } 
const nextPropA = { foo: 'bar' } 

shallowEqual(propA, nextPropA) // false

所以仔細使用對象和數組。爲了證明PureComponent作品，看到這個例子（v15.6）：單擊該按鈕將不會觸發Foohttps://codepen.io/CodinCat/pen/eRdzXM?editors=1010

的渲染：

下面是另一個例子PureComponent可能無法正常工作爲您提供：https://codepen.io/CodinCat/pen/QgKKLg?editors=1010

唯一的區別是<Foo someProp={{ foo: 'bar' }} />

因爲{ foo: 'bar' } !== { foo: 'bar' }，會作出反應每一次重新渲染。所以直接編寫直接插入對象和數組並不是一個好習慣。一個常見的錯誤是寫內嵌樣式：

<Foo style={{ color: 'pink' }} />

在這種情況下Foo總會重新渲染，即使它是一個PureComponent。如果你正面臨這個問題，你可以簡單地提取和存儲一些對象，例如：

const someProp = { foo: 'bar' } 

<Foo someProp={someProp} />

由於someProp === someProp的PureComponent工作。

來源

2017-06-14 07:24:40 CodinCat

看起來像這是由對象作爲道具傳遞引起的。我理解比較問題，但感覺離開obj/arr道具不是最好的解決方案。這是因爲應用程序中的數據結構與可重用組件相結合通常會導致實體周圍傳遞列表，然後將一個實體發送到子組件以進行渲染，通常還會與其他一些道具一起發送。如果我將所有實體數據道具與其他道具（如行爲道具）混合在一起，道具定義就會變得混亂。我想這意味着我需要創建我自己的shouldComponentUpdate，所以我不能使用React.PureComponent。 – henit

我的意思是內聯寫對象和數組。更新了答案，使其更清晰 – CodinCat

儘量不要使用像''那麼PureComponent應該可以工作 – CodinCat

React.PureComponent不執行shouldComponentUpdate

回答

相關問題