問題描述

現(xiàn)在我這邊有個(gè)想法，但是之前沒有具體的做過，所以不知道是否可行。舉個(gè)例子：

// 這是一個(gè)父組件<Father />// 這是一個(gè)子組件<Son />

父組件里面可能包含多個(gè)被復(fù)用的子組件。父組件負(fù)責(zé)到server端拿數(shù)據(jù)，子組件負(fù)責(zé)渲染父組件拿到的數(shù)據(jù)。這都很正常。現(xiàn)在有一個(gè)需求，需要讓子組件有一個(gè)過濾的功能。最簡單的例子就是一個(gè)列表頁，根據(jù)不同的過濾方式展現(xiàn)不同的數(shù)據(jù)。舉個(gè)例子，‘選擇10號(hào)-12號(hào)的所有數(shù)據(jù)并展示’。如果將數(shù)據(jù)的操作放到父組件去做，那么父組件會(huì)變得非常的臃腫，因?yàn)樽咏M件會(huì)被引用多次。我的設(shè)想是，把數(shù)據(jù)放到子組件的state上，讓子組件自己去管理，從而導(dǎo)致子組件的re-render。不過我沒有確實(shí)的做過這種功能的劃分，所以想來問下各位大神，我的設(shè)想是否可行？以后會(huì)不會(huì)存在什么局限？

看了下好像有些人還不太明白我的意思，我貼個(gè)圖吧

根據(jù)篩選，展示不同的數(shù)據(jù)

問題解答

可以把父組件作為單純的數(shù)據(jù)獲取組件，然后子組件中寫過濾的事件函數(shù)，只要子組件的setState就能觸發(fā)re-render的；至于渲染的數(shù)據(jù)，可以直接用父組件的數(shù)據(jù)，然后在render中做filter，用filter之后的數(shù)據(jù)去渲染。

就是要在father 里面做網(wǎng)絡(luò)請求，然后用props傳給son，子節(jié)點(diǎn)可能有好多，都一次次做網(wǎng)絡(luò)請求不現(xiàn)實(shí)，這里當(dāng)父節(jié)點(diǎn)的數(shù)據(jù)發(fā)生變化當(dāng)然能更新子節(jié)點(diǎn)了，因?yàn)槎际菃蜗驍?shù)據(jù)流。

如果你的數(shù)據(jù)實(shí)在是太多不想用父節(jié)點(diǎn)來組織的話也可以用redux吧，不過有難度。

子組件應(yīng)該是可高度復(fù)用的，傳入的數(shù)據(jù)決定渲染的內(nèi)容。不同的過濾方法可以寫在子組件中，父組件傳入數(shù)據(jù)和過濾方式的編號(hào)，子組件根據(jù)這些條件渲染。

就需求而言：Son拿到父組件的props，同時(shí)本地維護(hù)一份state，然后再維護(hù)一個(gè)filter state。初始化和componentWillReceiveProps時(shí)把父組件傳遞的props過濾一遍setState到子組件上。

過濾操作時(shí)再調(diào)用一遍過濾函數(shù)處理父組件傳遞的props：因?yàn)閭鬟f的props是不變的，但是你組件的state或許由于過濾導(dǎo)致數(shù)據(jù)丟失什么的。

更進(jìn)一步：如果需要做過濾條件多組件共享或者持久化存儲(chǔ)。那里就得考慮redux之內(nèi)的把過濾條件管理起來了。

講道理是應(yīng)該放到子組件中的，這樣比較符合SRP(單一職責(zé)原則。

getData(filter1,filter2,filter3)，子組件將filter1，filter2，filter3參數(shù)傳給父組件，父組件根據(jù)參數(shù)拉數(shù)據(jù)，拉完數(shù)據(jù)給子組件