使用新數據更新React組件

在傳統的Web應用程序中，引入了React組件，我們稱之爲CustomComponent。使用新數據更新React組件

updateView(newData) { 
    React.render(<CustomComponent data={newData} />, document.querySelector('.custom-component-1')); 
}

這工作，但由於某些原因，實際的DOM節點.custom-component-1似乎清空每次React.render被調用它，擊敗利用反應達到最小DOM更新，因爲每次它取代了目的內容。

我在做什麼錯？

來源

2015-07-01 Peter V

我的答案是不正確，根據你呈現的現有容器應該重新描繪的API。 https://facebook.github.io/react/docs/top-level-api.html#react.render – Silfverstrom

是的，但是實際上React似乎在做你在答案中寫的東西，很奇怪。 –

-1

當您使用React.render時，React不會針對以前的虛擬DOM測試現有的虛擬DOM - 它只是重新呈現該組件。

你指的是 - 只有當狀態改變時才渲染 - 發生在組件內的render方法中。

例子：

// always renders 
React.render(<CustomComponent />, document.querySelector('.custom-component')); 

// renders only when state changes 
var CustomComponent = React.createClass({ 
    render() { 
    I re-render only if my state changes 
    } 
});

來源

2015-07-01 22:10:49

雖然這與文檔不矛盾嗎？ https://facebook.github.io/react/docs/top-level-api.html#react.render據我所知，React.render會調用組件的render（），即使道具沒有被調用，不會更新，但不會更新真正的DOM，因爲新的虛擬DOM將與舊的完全相同。 –

是的，這不符合文檔。 –

使用新數據更新React組件

回答

相關問題