react源碼解析1.開(kāi)篇介紹和面試題

視頻課程（高效學(xué)習(xí)）：進(jìn)入課程

課程目錄：

1.開(kāi)篇介紹和面試題

2.react的設(shè)計(jì)理念

3.react源碼架構(gòu)

4.源碼目錄結(jié)構(gòu)和調(diào)試

5.jsx&核心api

6.legacy和concurrent模式入口函數(shù)

7.Fiber架構(gòu)

8.render階段

9.diff算法

10.commit階段

11.生命周期

12.狀態(tài)更新流程

13.hooks源碼

14.手寫(xiě)hooks

15.scheduler&Lane

16.concurrent模式

17.context

18事件系統(tǒng)

19.手寫(xiě)迷你版react

20.總結(jié)&第一章的面試題解答

21.demo

怎樣學(xué)習(xí)react源碼

作為前端最常用的js庫(kù)之一菌羽，熟悉react源碼成了高級(jí)或資深前端工程師必備的能力，如果你不想停留在api的使用層面或者想在前端技能的深度上有所突破是晨，那熟悉react源碼將是你進(jìn)步的很好的方式层扶。

react的純粹體現(xiàn)在它的api上箫章，一切都是圍繞setState狀態(tài)更新進(jìn)行的，但是內(nèi)部的邏輯卻經(jīng)歷了很大的重構(gòu)和變化镜会，而且代碼量也不小炉抒，如果只是從源碼文件和函數(shù)來(lái)閱讀，那會(huì)很難以理解react的渲染流程稚叹。優(yōu)秀工程師幾年時(shí)間打造的庫(kù)焰薄，必定有借鑒之處拿诸，那么我們應(yīng)該怎樣學(xué)習(xí)react源碼呢。

react源碼1.3

首先，我們可以從函數(shù)調(diào)用棧入手，理清react的各個(gè)模塊的功能和它們調(diào)用的順序生巡，蓋房子一樣，先搭好架子，對(duì)源碼有個(gè)整體的認(rèn)識(shí)霹肝，然后再看每個(gè)模塊的細(xì)節(jié)垮兑，第一遍的時(shí)候切忌糾結(jié)每個(gè)函數(shù)實(shí)現(xiàn)的細(xì)節(jié)膊夹，陷入各個(gè)函數(shù)的深度調(diào)用中侵佃。其次可以結(jié)合一些demo和自己畫(huà)圖理解叉抡，react源碼中設(shè)計(jì)大量的鏈表操作撵颊，畫(huà)圖是一個(gè)很好的理解指針操作的方式。源碼里也有一些英文注釋?zhuān)梢愿鶕?jù)注釋或者根據(jù)此react源碼解析文章進(jìn)行理解番枚。

熟悉react源碼并不是一朝一夕的事洋丐，想精進(jìn)自己的技術(shù)掷漱，必須花時(shí)間才行喳魏。

react源碼1.2

react源碼3.2

課程特色

本課程遵循react v17.0.1源碼的核心思想，目的是打造一門(mén)通俗易懂的react源碼解析系列文章。課程從源碼的各個(gè)模塊開(kāi)始曼验，結(jié)合大量demo押蚤、示例圖解和視頻教程掖桦，帶著大家一步一步調(diào)試react源碼蒲犬，課程也會(huì)完全遵循react17手寫(xiě)hook和精簡(jiǎn)版的react方便大家的理解，隨著react大版本的更新亭螟，此課程也會(huì)一直更新。

課程結(jié)構(gòu)

react源碼1.1

課程收獲

為什么要學(xué)習(xí)react源碼呢道媚，你是使用了api很久扁掸，停留在框架使用層面還是會(huì)主動(dòng)去了解框架的邏輯和運(yùn)行方式呢欢嘿。跟著課程走，理解起來(lái)不費(fèi)力也糊，你將收獲：

• 面試加分：大廠前端崗都要求熟悉框架底層原理炼蹦，也是面試必問(wèn)環(huán)節(jié)，熟悉react源碼會(huì)為你的面試加分狸剃，也會(huì)為你的談薪流程增加不少籌碼
• 鞏固基礎(chǔ)知識(shí)：在源碼的scheduler中使用了小頂堆 這種數(shù)據(jù)結(jié)構(gòu)掐隐，調(diào)度的實(shí)現(xiàn)則使用了messageChannel，在render階段的reconciler中則使用了fiber钞馁、update虑省、鏈表 這些結(jié)構(gòu)，lane模型使用了二進(jìn)制掩碼僧凰，我們也會(huì)介紹diff算法怎樣降低對(duì)比復(fù)雜度探颈。學(xué)習(xí)本課程也順便鞏固了數(shù)據(jù)結(jié)構(gòu)和算法、事件循環(huán)训措。
• 日常開(kāi)發(fā)提升效率：熟悉react源碼之后伪节，你對(duì)react的運(yùn)行流程有了新的認(rèn)識(shí)，在日常的開(kāi)發(fā)中绩鸣，相信你對(duì)組件的性能優(yōu)化怀大、react使用技巧和解決bug會(huì)更加得心應(yīng)手。

相信學(xué)完課程之后呀闻，你對(duì)react的理解一定會(huì)上升一個(gè)檔次化借，甚至?xí)^(guò)大多數(shù)面試官了

常見(jiàn)面試題（帶上問(wèn)題學(xué)習(xí)吧）

以下這些問(wèn)題可能你已經(jīng)有答案了，但是你能從源碼角度回答出來(lái)嗎捡多。

1. jsx和Fiber有什么關(guān)系
2. react17之前jsx文件為什么要聲明import React from 'react'蓖康，之后為什么不需要了
3. Fiber是什么，它為什么能提高性能

hooks

1. 為什么hooks不能寫(xiě)在條件判斷中

狀態(tài)/生命周期

1. setState是同步的還是異步的
2. componentWillMount垒手、componentWillMount蒜焊、componentWillUpdate為什么標(biāo)記UNSAFE

組件

1. react元素$$typeof屬性什么
2. react怎么區(qū)分Class組件和Function組件
3. 函數(shù)組件和類(lèi)組件的相同點(diǎn)和不同點(diǎn)

開(kāi)放性問(wèn)題

1. 說(shuō)說(shuō)你對(duì)react的理解/請(qǐng)說(shuō)一下react的渲染過(guò)程
2. 聊聊react生命周期
3. 簡(jiǎn)述diff算法
4. react有哪些優(yōu)化手段
5. react為什么引入jsx
6. 說(shuō)說(shuō)virtual Dom的理解
7. 你對(duì)合成事件的理解
   1. 我們寫(xiě)的事件是綁定在dom上么，如果不是綁定在哪里淫奔？
   2. 為什么我們的事件手動(dòng)綁定this(不是箭頭函數(shù)的情況)
   3. 為什么不能用 return false來(lái)阻止事件的默認(rèn)行為山涡？
   4. react怎么通過(guò)dom元素堤结，找到與之對(duì)應(yīng)的 fiber對(duì)象的？

解釋結(jié)果和現(xiàn)象

23. 點(diǎn)擊Father組件的div，Child會(huì)打印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);
    

24. 打印順序是什么

    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/>;
    }
    

25. useLayoutEffect/componentDidMount和useEffect的區(qū)別是什么

    class App extends React.Component {
      componentDidMount() {
        console.log('mount');
      }
    }
    
    useEffect(() => {
      console.log('useEffect');
    }, [])
    

26. 如何解釋demo_4眉抬、demo_8暖途、demo_9出現(xiàn)的現(xiàn)象