想要一份senior工做，務必要讀 React 源代碼嗎？

打算試着記錄下每日的感悟，有趣的庫，有趣的文，有趣的事，和思考。走一路，留下些腳印。

關於讀源代碼

這段面試了一些。不少公司都會甩這個問題給你：讀過 React 的源代碼嗎？ 答曰：沒讀過。瞬間感到本身的自信心掉了一塊。網上也不乏各類分析源代碼的文章和精讀，只是我仍是沒有那個勇氣和興趣去讀如此成熟的一個庫的源代碼，甚至想讀也不知從何讀起。

但爲了面試，彷佛這是必須的？

因而跑上 Reddit 發了一貼，想問問看老外們是怎麼看這個問題的。

十分鐘過去了，獲得一個回覆，全文以下：

But I can't bring myself on reading the source code of such a mature project, I don't even know where to begin.

Don't feel bad. I think every one of us on the core team has parts of React that we have not read (or at least are only vaguely familiar with).

So I wonder, especially for those who've read the code, is it important to read the source code if you are searching for a senior job?

My feeling is a strong "no" for this one. You don't need to read the source code to use React effectively. The docs should be sufficient! If they aren't, we've done a poor job.

簡單翻譯以下：

我讀不來源碼，都不知道從哪兒開始

不要感到難過，咱們React核心開發團隊的每一個人都或多或少有一部分源代碼沒有讀過。

想問一下讀過的人，找一份senior工做，讀源代碼是否必要？

我我的強烈認爲「No」。即便不讀源代碼也能高效使用 React。官方文檔應該已經足夠了！若是不夠，說明咱們的工做沒作好。

哈哈，驚不驚喜，意不意外。逛貼吧撞上facebook大佬。大佬表態了，估計說該讀的人也都退散了。沒聽到反面的聲音也算一大遺憾，固然比不過收到這個回覆的驚喜。

我的觀點是：

1. 瞭解生命週期
2. 瞭解diff的算法（文檔 reconciliation ）

就算React是一個黑箱子，知道它運做的規則能夠自我解答不少「這樣寫影不影響性能」的疑問。

第二個回覆的 acemarke 是redux文檔的維護者，常常熱心解答各類問題，他說本身沒讀過源碼讓我吃了一驚。同時決定暫時不去讀了。畢竟還有那麼多想要作的事，想要學的東西。前端的更新速度真是太瘋狂了。讓面試見鬼去吧（說笑）。

問題

1. diff 的算法複雜度是多少？
2. 若是兩個子元素的key同樣，React的diff算法會怎麼作(無法用key區分哪一個是哪一個了)？

第一題 O(n) 。第二題懇請知道答案的各位大牛慷慨留言 ：D

補充：拿了幾個demo試驗了一下，key相同的狀況渲染結果很不穩定，最簡單數組map到div彷佛能正常渲染，但拿todolist試驗發現只要出現重複key只會渲染第一條。有趣的是，連warning文字在幾個狀況下也有些許不一樣（也多是react版本不一樣形成），但大體的意思是：重複key會引發未知情況，帶重複key的元素渲染有可能會被忽視，也有可能出現重複。這裏果真是要看源代碼才能知道內部是怎麼處理的。

問題

1. 能夠在 React 組件裏定義 React 組件嗎？
2. 能夠在 render() 函數裏定義 React 組件嗎？

答案是：能夠和不能夠。React組件能夠做爲另外一個組件的實例方法。感受就是函數裏面定義函數，沒問題。

可是在render() 裏定義 React 組件會出事。這裏就涉及到diff的算法的第一假設，若是兩次 render 的組件不一樣, 那React就會銷燬原元素，而後從新渲染新的元素。這不只僅是性能，全部組件及其子組件的state都被銷燬了。那麼爲啥在render() 裏定義組件會讓 render認爲組件不一樣呢？由於組件是一個class或者是function，js裏對比兩個class 或者是 function 是否相等是看二者的引用（reference），因此必然不相等。

const a = class {}
const b = class {}
a === b // false
複製代碼

通常不會有人在組件裏定義組件（這麼作是能夠的），更別提在render() 函數裏了。不過我確實遇到了這樣的狀況，好比在render()裏使用HOC。

最近忙就寫這些吧。

最後推薦一篇早上看了開我眼界的文章：用webflow設計App。

一直覺得像webflow這樣的工具是給不會css的設計師寫網頁用的。可是一個使用 React + GraphQL 框架的公司也決定使用webflow，並且完美整合。也許像webflow同樣的工具會是前端開發的將來呢。

我寫的其餘專欄文章列表 傳送門。