更新道具是否應該重新渲染整個組件？

假設我有一個CookingClass組件，它可以像這樣初始化。更新道具是否應該重新渲染整個組件？

let teachers = makeTeachers(["Amber", "Jason", "Lily"]) 
let students = makeStudents(["Hopper"]) 

<CookingClass 
    teachers={teachers} 
    students={students} 
/>

一位教師的退出：

let newTeachers = makeTeachers(["Amber", "Jason"]) 

<CookingClass 
    teachers={newTeachers} 
/>

這將使整個組件重新渲染。我不確定React是否只計算差異並有效地重新渲染，或者我必須自己使用shouldComponentUpdate來照顧它。

更真實的例子可能是實現一個Google地圖，其中有一百萬個標記，並且您想替換其中一個標記。

來源

2016-06-13 Maximus S

是的，你應該使用'shouldComponentUpdate'，以儘量減少重新渲染，並使用'key's以保證回收利用。 – Kujira

看看使用react-redux。它爲你解決了這個問題http://redux.js.org/docs/basics/UsageWithReact.html –

您正在更改所謂的虛擬DOM節點。對於虛擬節點shouldComponentUpdate()中的每個更改都會被調用。如果你沒有自己實現它，它將永遠return true;

所以，如果你只想在特定情況下重新加載你的CookingClass你必須自己實現它。

React的專業是當它們在虛擬DOM中被更改時它只會重新呈現Native DOM節點。這是讓React如此之快的「渲染」。

來源

2016-06-13 20:46:07 KRONWALLED

值得注意的是，當使用官方'react-redux'綁定時，'shouldComponentUpdate'被實現並且不總是*返回真正。 –

real DOM渲染完全由React處理，效率非常高效innerHTML插入，僅適用於應用程序VirtualDomTree的新數據結構中的更改。

shouldComponentUpdate()控制組件是否應該重新計算或不。例如，當您渲染靜態數據時，您應該使用它。組件的輸出不會改變，因此您只需返回false，組件的第一個版本將永久使用;）

來源

2016-06-13 23:16:07 webdeb

根據您的示例代碼，該組件將每次都重新呈現。

您應該使用react-redux（documentation）綁定將組件連接到商店。

// ConnectedCookingClass.js 
import { connect } from 'react-redux'; 
import CookingClass from './CookingClass'; 

const mapStateToProps = (state) => { 
    return { 
    teachers: state.teachers, 
    students: state.students 
    }; 
}; 

const ConnectedCookingClass = connect(mapStateToProps)(CookingClass); 

export default ConnectedCookingClass;

然後在其他地方使用該組件，像這樣：

// OtherComponent.js 
import ConnectedCookingClass from './ConnectedCookingClass'; 

const OtherComponent = React.createElement({ 
    render() { 
    return (
     <div> 
     <ConnectedCookingClass /> 
     </div> 
    ); 
    } 
});

的反應，終極版綁定會做一些聰明的東西給你，只喜歡重新呈現組件時，道具由歸國mapStateToProps實際上與以前的值不同（via a shallowEqual comparison），所以您應該嘗試僅返回值，而不是函數。函數應在mapDispatchToProps中返回。

的shouldComponentUpdate的反應，終極版的默認實現將返回true時：

ALWAYS如果組件是一個「純」成分（又名stateless-function）
當道具已經被手動更新（後componentWillReceiveProps調用）
當商店發生變化時，新的道具與舊的道具不同。

這裏是看起來像從source code：

shouldComponentUpdate() { 
    return !pure || this.haveOwnPropsChanged || this.hasStoreStateChanged 
}

來源

2016-06-13 23:23:50

更新道具是否應該重新渲染整個組件？

回答

相關問題