javascript - react 組件props和state的問題

問題描述

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

// 這是一個父組件<Father />// 這是一個子組件<Son />

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

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

根據篩選，展示不同的數據

問題解答

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

就是要在father 里面做網絡請求，然后用props傳給son，子節點可能有好多，都一次次做網絡請求不現實，這里當父節點的數據發生變化當然能更新子節點了，因為都是單向數據流。

如果你的數據實在是太多不想用父節點來組織的話也可以用redux吧，不過有難度。

子組件應該是可高度復用的，傳入的數據決定渲染的內容。不同的過濾方法可以寫在子組件中，父組件傳入數據和過濾方式的編號，子組件根據這些條件渲染。

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

過濾操作時再調用一遍過濾函數處理父組件傳遞的props：因為傳遞的props是不變的，但是你組件的state或許由于過濾導致數據丟失什么的。

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

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

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