???????剛從JQ轉(zhuǎn)向React進行開發(fā)的時候巨朦，領(lǐng)導(dǎo)和我說了一句話 “React組件的數(shù)據(jù)冠王，是誰持有赶撰，誰消費”。其實當(dāng)時并不明白這句話什么意思≈梗現(xiàn)在對照J(rèn)Q豪娜，把理解寫下來。有錯漏請看官指出哟楷。
???????React中最重要的兩個概念就是props和state侵歇。props是指父組件傳遞下來的屬性（props可以是一個任意類型的數(shù)據(jù)），state是組件本身自我管理的狀態(tài)吓蘑。組件如何進行自我管理state惕虑，還有如何利用props坟冲，就成了初步使用react的第一個問題。
???????首先必須明確的一點是在React中溃蔫，數(shù)據(jù)只能單向的從父組件中傳遞給子組件健提。如果子組件想要把數(shù)據(jù)傳遞給父組件，只能通過props回調(diào)伟叛。即 props是一個方法私痹，子組件調(diào)用這個方法，可以把想要給父組件的數(shù)據(jù)通過參數(shù)傳回去统刮。
???????明白了以上三點紊遵，開始這篇的話題。
???????現(xiàn)在有個場景侥蒙。參照antd的Table組件暗膜，如下圖：
???????頁面首次加載的時候，首先請求接口數(shù)據(jù)渲染表格鞭衩。假設(shè)左上角的按鈕修改了數(shù)據(jù)学搜，會重新渲染表格。
???????組件劃分是：
???????頁面上有組件TableContainer论衍，TableContainer包含左上角按鈕瑞佩，和Table組件（Button與Table未拆分）。
???????剛開發(fā)這個表格坯台，我想的方案是：在頁面componentWillMount中請求接口炬丸，將返回的數(shù)據(jù)通過props傳遞下去。存入子組件的state蜒蕾。Table渲染state數(shù)據(jù)御雕。點擊按鈕后重新請求接口，將數(shù)據(jù)更新state滥搭。
???????這個思維方式被領(lǐng)導(dǎo)批評為仍然是JQ思想。按照我當(dāng)時JQ的想法捣鲸，按鈕的事件中寫好接口瑟匆，然后接收數(shù)據(jù)。數(shù)據(jù)和頁面無關(guān)栽惶。
???????比較合適的方案：
???????按鈕組件和Table分離愁溜。數(shù)據(jù)是頁面的，因此由頁面處理外厂。Button組件只負(fù)責(zé)通知頁面要請求數(shù)據(jù)冕象，具體這個發(fā)送等操作，還是由頁面執(zhí)行汁蝶。Table組件只負(fù)責(zé)渲染渐扮。這就是所謂的“誰持有论悴，誰消費”。
???????首次請求數(shù)據(jù)墓律，將數(shù)據(jù)存入頁面的state中膀估，在render中讀取state，通過props一層層傳遞給Table組件耻讽。同時定義好一個請求數(shù)據(jù)的方法（假設(shè)方法名為getTableData）察纯。將這個方法通過props傳遞給按鈕組件。Button的click事件中調(diào)用getTableData方法针肥。click事件被觸發(fā)饼记，則數(shù)據(jù)重新被請求，更新頁面state慰枕。傳下來使table數(shù)據(jù)刷新具则。
???????第二種方案中，數(shù)據(jù)只在頁面上操作捺僻，子組件只需要對數(shù)據(jù)進行渲染乡洼，不操作數(shù)據(jù)。即：所有的數(shù)據(jù)處理匕坯，都只在容器組件中處理束昵。
???????至于為什么這么做，下一篇（你為什么需要componentShouldUpdate葛峻？）中解釋锹雏。
