人人都能讀懂的react源碼解析(大廠高薪必備)
1.開篇(聽說你還在艱難的啃react源碼)
本教程目標是打造一門嚴謹(嚴格遵循react17核心思想)、通俗易懂(提供大量流程圖解，結合demo、視頻教程)的react源碼解析課程，爭取做到最容易理解，學起來效率最高的教程。在視頻教程中，會帶着大家一步一步斷點調試。學完本課程后，你對react的理解會上升一個檔次，如果能把課程所有知識點都掌握，相信你對react源碼的認知已經超過大多數的面試官了。
視頻講解
視頻講解的目的是為了快速掌握react源碼運行的過程和react中的scheduler、reconciler、renderer、fiber等，並且詳細debug源碼和分析，過程更清晰。
視頻講解（高效學習）:點擊學習
往期文章:
- 開篇(聽說你還在艱難的啃react源碼)
- react心智模型(來來來,讓大腦有react思維吧)
- Fiber(我是在內存中的dom)
- 從legacy或concurrent開始(從入口開始,然后讓我們奔向未來)
- state更新流程(setState里到底發生了什么)
- render階段(厲害了,我有創建Fiber的技能)
- commit階段(聽說renderer幫我們打好標記了,映射真實節點吧)
- diff算法(媽媽再也不擔心我的diff面試了)
- hooks源碼(想知道Function Component是怎樣保存狀態的嘛)
- scheduler&lane模型(來看看任務是暫停、繼續和插隊的)
- concurrent mode(並發模式是什么樣的)
- 手寫迷你react(短小精悍就是我)
react源碼難學嗎
在一個寂靜的夜晚，我思考了一下最近幾年的成長，發現除了ctrl+c、ctrl+v用的熟練一點，其他好像也不是很懂啊，不行我得 深入學習一下react 源碼，畢竟這是日常開發中用的最多的框架嘛。
很好，先下載一下react源碼，嗯，主要代碼是在packages下嘛，順着線索找到 入口 react文件夾下的React.js，小樣，代碼也不是很多嘛。隨着慢慢的 進入 不對勁，怎么越來越懵逼了，這個引用關系是怎樣的？這個文件有什么用？這個函數為什么是這樣的？截個圖，感受一下其中一個部分。
既然不知道他們的調用順序，那我可以打斷點順着調用棧找啊，於是打開瀏覽器的performance看到的是這個亞子的，這么多函數我該怎么理清楚啊。
相信很多react開發者學習源碼時都會遇到這些問題，沒關系，順着此課程提供的線索，相信你會對react源碼結構和不同的部分功能會有一個完整和清晰的認識，自然react源碼也就不那么難學了。
怎樣學好react源碼
學好react源碼最忌諱糾結每個函數的實現，然后鑽牛角尖，陷入無限函數的調用和遞歸中，就像盜夢空間的多重夢境中一樣。
在學習的過程中我們注重整體學習法，因為react每個部分並不是孤立的，舉個栗子，在函數調用的過程中可能涉及異步調度的邏輯，所以會涉及schduler。我們需要從入口開始，對react源碼整體的工作流程和每個部分的實現有整體的認識，然后正式學習每個部分的時候再開始了解這部分函數具體實現。
課程特色
不同於市面上幾十行實現一個簡易版的react，所有思想和模型完全遵循最新react17版本，讓你體會原汁原味的react源碼，而不是自己模擬實現一下react源碼的功能，並且隨着react版本更新，課程內容也會不斷更新。
大量圖解配合demo和視頻教程，學起來不費勁，學完之后面試又可以裝X了，開心～（開個玩笑）
從react 入口 開始為你展現react源碼的全貌，對react源碼執行流程和各個部分的功能和原理有個清晰的認識
視頻教程帶着大家一步步調試，高效理解各個函數的功能和作用
課程收獲
為什么要學習react源碼呢？作為一個使用多年react的前端工程師，你是停留在使用框架的層面還是去了解過框架底層的邏輯和運行方式，你是一個知識用了幾年還是在不斷的在不同的方向尋找突破呢。
- 面試加分：在內卷的時代，大廠前端崗都要求熟悉框架底層原理，也是面試必問環節，熟悉react源碼會為你的面試加分，也會為你的談薪流程增加不少籌碼。
- 鞏固基礎知識：在源碼的scheduler中使用了小頂堆 這種數據結構，調度的實現則使用了messageChannel，在render階段的reconciler中則使用了fiber、update、鏈表 這些結構，diff算法的過程則使用了dfs，lane模型使用了二進制掩碼。學習本課程也順便鞏固了數據結構和算法、事件循環。
- 日常開發提升效率：熟悉react源碼之后，你對react的運行流程有了新的認識，在日常的開發中，相信你對組件的性能優化、react使用技巧和解決bug會更加等心應手。
帶上問題開始吧(少年,寫了這么多年react這些問題真的清楚了嗎)
這些問題有些可能你已經知道答案了，但是你真的能從源碼的角度回答出原因嗎。學完視頻課程后，相信你已經有自己的答案了
1.為什么hooks不能寫在條件判斷中
2.jsx和Fiber有什么關系
3.jsx文件為什么要聲明import React from 'react';
4.setState是同步的還是異步的
5.componentWillMount、componentWillMount、componentWillUpdate為什么標記UNSAFE
6.點擊Father組件的div，Child會打印Child嗎
function Child() {
console.log('Child');
return <div>Child</div>;
}
function Father(props) {
const [num, setNum] = React.useState(0);
return (
<div onClick={() => {setNum(num + 1)}}>
{num}
{props.children}
</div>
);
}
function App() {
return (
<Father>
<Child/>
</Father>
);
}
const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl);
7.打印順序是什么
function Child() {
useEffect(() => {
console.log('Child');
}, [])
return <h1>child</h1>;
}
function Father() {
useEffect(() => {
console.log('Father');
}, [])
return <Child/>;
}
function App() {
useEffect(() => {
console.log('App');
}, [])
return <Father/>;
}
8.componentDidMount和useEffect的區別是什么
class App extends React.Component {
componentDidMount() {
console.log('mount');
}
}
useEffect(() => {
console.log('useEffect');
}, [])
9.為什么string類型的ref prop將會被廢棄？
10.簡述diff算法
11.react16.4+的生命周期
12.Fiber是什么，它為什么能提高性能
13.react元素$$typeof屬性什么
14.react怎么區分Class組件和Function組件
15.react有哪些優化手段
16.suspense組件是什么
17.如何解釋demo_4 demo_7 demo_8出現的現象
視頻課程安排
