答：

一：其實這個問題已經問了很多年了胎围，但還是有很多人會掛在這道題上欲低。網上的答案也是一搜一大把，如果你用過react做過一兩個項目韭畸，不是特別小的項目的話宇智，如果你平時認真總結，也能說的差不多胰丁。但很明顯随橘，前端發(fā)展到今天，很多回答是不能滿足面試官的胃口的锦庸。

面試官有的他可能對react也不熟机蔗，所以你要回答出你的氣場，回答有條理甘萧，第一種萝嘁，第二種等等；面試官可能只是想聽一下你的簡單回答扬卷，那么到目前為止牙言，網上的答案或者你平時總結一些也都可以答完這道題，但隨著疫情嚴重怪得，環(huán)境惡劣咱枉，僅僅回答條目怕是難以讓面試官對你傾心；還有的面試官比較苛刻徒恋，或者基于現(xiàn)在大環(huán)境的考量蚕断，我今天寫一下我通過和各大廠同學交流后，大家希望得到的答案入挣。

很多面試官在面試的時候比較反感的就是指導性回答亿乳，比如讓你說一下數(shù)組去重，你簡單的說了一句indexof径筏，就像是在指導別人工作一樣风皿，可能平時工作這樣子一點問題也沒有，但面試的時候匠璧，面試官或者一面的技術面，他最大程度的決定著你能不能通過面試咸这。很多人如果技術面過了夷恍，后邊的老板面，HR面反而好通過。后邊我還會為大家寫老板面的相關文章酿雪。

所以總結起來就是遏暴，react組件間的數(shù)據(jù)傳遞這道題，在線上面試的前提下指黎，在你不寫代碼的前提下朋凉，在只是語音描述的前提下，如何讓面試官覺得舒服醋安。正所謂人無我有杂彭，人有我有，其實內卷早就存在吓揪，只不過這個詞當時不存在而已亲怠。

二、開始按條理回答

?????? 1.共享式傳遞

?????? 因為react組件最終打出來的業(yè)務代碼js會<div id=”app” />下方柠辞，所以我們在頂部添加window.name可以使全局react組件達到共享的目的团秽，所以與之類似的還有l(wèi)ocalstorage，sessionStorage,cookie等叭首，都是為了共享

?????? 2.普通的數(shù)據(jù)修改傳遞

????????????? 如果做的項目過于簡單习勤，是沒有必要非得引入redux的，要知道引入rudex也是需要成本的焙格。其實也就是dedux的初級版本图毕。例如在當前組件發(fā)起ajax請求，當服務端修改數(shù)據(jù)后间螟，目標組件再請求數(shù)據(jù)吴旋，達到傳遞效果

?????? 3.與上一條類似，在某種場景下不發(fā)ajax請求厢破，為什么不發(fā)呢荣瑟，只是前端自己閉環(huán)做事情和前后端聯(lián)調所需成本畢竟不同。你可以通過node的fs去寫文件摩泪，寫內容笆焰，在目標組件再次讀取這個通過fs寫的文件內容

?????? 4.可能你也不想在業(yè)務代碼js頂部寫window.name類似的全局變量，但因為redux代碼來的冗余见坑，那么建議在項目src根目錄下添加store.js嚷掠，當然只是取名為store.js，其實跟redux那個sotre不是一回事荞驴。這一步的store.js只是定義一些變量數(shù)據(jù)不皆，當某個組件需要的時候再去import引入，當然也可以修改store.js里的變量熊楼。當目標組件需要用到的時候呢霹娄，再import這個store.js文件。這里已經不是單純的window.name那樣全局變量的概念了，而是通過模塊化維護一套運行在react組件頂部的變量

?????? 5.然后就開始說基于react技術棧的組件傳遞了犬耻。那么面試官的問題是react組件之間的數(shù)據(jù)傳遞踩晶，為什么前面還要啰嗦那么多呢。因為你的思路越多枕磁，可能就是面試官希望團隊中尋求的那個人渡蜻，證明你經驗豐富，證明你熱愛總結计济。要知道除了技術面茸苇，老板很多也是技術出身，所以他希望看到一個思路開闊的同學峭咒，這會讓他眼前一亮税弃。

?????? 6.接下來就是父組件傳遞給子組件，使用過的都知道凑队，父組件通過<Child name=”jim” />,而子組件通過解構props就可以拿到name值则果。我想現(xiàn)在幾乎所有的答題者這一步也就是這么回答。但你有沒有想過漩氨，在目前的大環(huán)境下西壮，你這個職位有多少人在爭取，而且他們可能已經好幾個月沒工作了叫惊，天天在家學習款青，還有很多大廠畢業(yè)生可能也是你的競爭對手，所以還是那個內卷原則霍狰，人無我有抡草，人有我優(yōu)。你就不能說到這里就結束蔗坯。首先這個Child組件康震，我們傳入了name=”jim”，子組件會有constructor函數(shù)宾濒，這個函數(shù)里同構super獲取props這個對象腿短，對象中包含著我們要傳遞的name值。那么這個constructor函數(shù)當然也可以不寫绘梦，但是不手動寫橘忱，代碼還是會隱式添加上。而super函數(shù)中的props是一個參數(shù)卸奉，是父組件傳遞過來的對象钝诚，所以子組件沒有this指向，必須通過super函數(shù)榄棵，將子組件做為this.props來指向父組件敲长，這樣也就拿到了傳遞過來的name值郎嫁，而這也是react單項數(shù)據(jù)流的傳輸。

?????? 7.子組件給父組件傳遞祈噪。其實有點類似回調函數(shù)了，子組件通過<Child oneHandleClick={e

=> this.count()}尚辑。而子組件通過props拿到oneHandleClick辑鲤，就可以通過子組件自身的onClick去執(zhí)行這個回調函數(shù)，然后執(zhí)行到父組件去杠茬。

?????? 8.兄弟組件月褥，兄弟組件其實是父傳子，子傳父瓢喉，父再傳兄弟的過程宁赤。我想如果你完整的說出了前2條，而這一條你這樣簡練的回答栓票，面試官也會覺得你總結上沒有問題决左。其實面試時間有限，一般1個小時左右吧走贪。所以該長了長佛猛，該短了少描述是一個不錯的選擇。但是短并非一味地簡短坠狡，而是讓面試官明白继找，你的簡短概括其實他已經知道你要說的答案了。

?????? 9.父傳更深層次的子組件逃沿，如果你只說一句context就想結束婴渡，那恐怕不行。一定要注意凯亮，面試不能指導性回答边臼，要誠懇回答。說自己如何使用触幼，使用的東西是什么邏輯硼瓣，甚至要講優(yōu)缺點。接著說context,你可以說給祖宗組件設定childContextTypes 和 getChildContext()置谦，react自動深層次向下傳遞堂鲤，當組件某個層次的子組件定義了contextTypes的時候，說明這個子組件有所需要媒峡，即可達到深層次數(shù)據(jù)傳遞瘟栖。當然，這只是使用谅阿，由于現(xiàn)在是線上面試技術居多半哟，你這么說酬滤，如果對面是一個明白人，肯定知道你至少是用過的了寓涨。但你一定要給自己加戲盯串，我就是要說context的邏輯。但是謹記戒良，面試講究一個氣場体捏，意思就是你可以源碼很少看過，但這個邏輯你要很自信的說出來糯崎。首先通過Reacct.createContext創(chuàng)建context對象几缭，當然這個對象有一定的數(shù)據(jù)結構，但最重要的是保存值用的currentValue沃呢，還有provide和consumer這3個要說出來年栓。而剛剛說使用場景的時候，getChildContext函數(shù)就是在給currentValue賦值薄霜，而react組件在最初生成的時候某抓，是有個fiber樹概念的，fiber是一個存有很多屬性的用來表示整個react組件樹的對象黄锤，所以在創(chuàng)建content的同時搪缨，還會去走react本身的修改數(shù)據(jù)的方法，這樣修改了fiber樹以后鸵熟，子組件fiber節(jié)點自然就可以拿到了副编。

?????? 10.redux，項目比較復雜的時候會用到流强。雖然之前說過redux會給項目帶來負擔痹届，但當項目比較復雜的時候，使用它帶來的效果會比優(yōu)于所謂的負擔值打月。引入reudx大概會增加不到10K的代碼體積吧队腐。首先還是說redux的流轉過程，業(yè)務組件里有個按鈕奏篙，觸發(fā)一個dispatch操作柴淘，然后發(fā)送的是action，而這個action可同步秘通，可異步为严，繼續(xù)向store流轉，store接收到action后肺稀，又觸發(fā)reducer去改變state數(shù)據(jù)第股，然后又把數(shù)據(jù)流轉回最初的業(yè)務組件，閉環(huán)话原。但這個過程可能面試官不太想問夕吻，因為大家都知道诲锹，他可能會順帶問問你有沒有遇到過什么問題，但其實正常使用涉馅，沒有問題啊归园。React本身是單向數(shù)據(jù)流轉，通過redux呢變成了雙向數(shù)據(jù)流轉稚矿，這個思路才是重點蔓倍。千萬謹記，面試的時候腦子里要有邏輯盐捷，而不是部分實現(xiàn)代碼，回答要順暢默勾。Redux的邏輯大概就是集中某個地方識別變量或者數(shù)據(jù)的變化碉渡，預先注冊回調函數(shù)，等感知到數(shù)據(jù)變化后調用回調函數(shù)母剥。再具體點就是創(chuàng)建store對象的時候滞诺，會有幾個內置函數(shù)，getState用來獲取最新state的值环疼，dispatch用來觸發(fā)監(jiān)聽函數(shù)习霹，subscribe用來注冊監(jiān)聽函數(shù)。而要使用redux呢炫隶，react最外層組件要包一層provide組件淋叶，然后再借助剛剛說的context回答方案達到數(shù)據(jù)傳遞。

結語：怎么樣伪阶？會不會覺得回答的太籠統(tǒng)煞檩，但不管你看幾遍源碼，概括起來就是這樣子的栅贴。因為面試官肯定會準備概念題和實例題斟湃，概念題嘛，就是說概念檐薯，時間限制凝赛，線上語音面試的限制，無法讓你一行一行念代碼坛缕，而其實很多面試官他也沒有看過源碼墓猎，但他知道大概流程或者某一部分細節(jié)。真正到了實例題祷膳，肯定就不是這種籠統(tǒng)邏輯了陶衅，我們后面說。