react原始碼解析1.開篇介紹和麵試題

首先，我們可以從函式呼叫棧入手，理清react的各個模組的功能和它們呼叫的順序，蓋房子一樣，先搭好架子，對原始碼有個整體的認識，然後再看每個模組的細節，第一遍的時候切忌糾結每個函式實現的細節，陷入各個函式的深度呼叫中。其次可以結合一些demo和自己畫圖理解，react原始碼中設計大量的連結串列操作，畫圖是一個很好的理解指標操作的方式。原始碼裡也有一些英文註釋，可以根據註釋或者根據此react原始碼解析文章進行理解。

熟悉react原始碼並不是一朝一夕的事，想精進自己的技術，必須花時間才行。

課程特色

本課程遵循react v17.0.1原始碼的核心思想，目的是打造一門通俗易懂的react原始碼解析系列文章。課程從原始碼的各個模組開始，結合大量demo、示例圖解和視訊教程，帶著大家一步一步除錯react原始碼，課程也會完全遵循react17手寫hook和精簡版的react方便大家的理解，隨著react大版本的更新，此課程也會一直更新。

課程結構

課程收穫

為什麼要學習react原始碼呢，你是使用了api很久，停留在框架使用層面還是會主動去了解框架的邏輯和執行方式呢。跟著課程走，理解起來不費力，你將收穫：

面試加分：大廠前端崗都要求熟悉框架底層原理，也是面試必問環節，熟悉react原始碼會為你的面試加分，也會為你的談薪流程增加不少籌碼
鞏固基礎知識：在原始碼的scheduler中使用了小頂堆 這種資料結構，排程的實現則使用了messageChannel，在render階段的reconciler中則使用了fiber、update、連結串列 這些結構，lane模型使用了二進位制掩碼，我們也會介紹diff演算法怎樣降低對比複雜度。學習本課程也順便鞏固了資料結構和演算法、事件迴圈。
日常開發提升效率：熟悉react原始碼之後，你對react的執行流程有了新的認識，在日常的開發中，相信你對元件的效能優化、react使用技巧和解決bug會更加得心應手。

相信學完課程之後，你對react的理解一定會上升一個檔次，甚至會超過大多數面試官了

常見面試題（帶上問題學習吧）

以下這些問題可能你已經有答案了，但是你能從原始碼角度回答出來嗎。

jsx和Fiber有什麼關係
react17之前jsx檔案為什麼要宣告import React from 'react'，之後為什麼不需要了
Fiber是什麼，它為什麼能提高效能

hooks

為什麼hooks不能寫在條件判斷中

狀態/生命週期

setState是同步的還是非同步的
componentWillMount、componentWillMount、componentWillUpdate為什麼標記UNSAFE

元件

react元素$$typeof屬性什麼
react怎麼區分Class元件和Function元件
函式元件和類元件的相同點和不同點

開放性問題

說說你對react的理解/請說一下react的渲染過程
聊聊react生命週期
簡述diff演算法
react有哪些優化手段
react為什麼引入jsx
說說virtual Dom的理解
你對合成事件的理解
1. 我們寫的事件是繫結在dom上麼，如果不是繫結在哪裡？
2. 為什麼我們的事件手動繫結this(不是箭頭函式的情況)
3. 為什麼不能用 return false 來阻止事件的預設行為？
4. react怎麼通過dom元素，找到與之對應的 fiber物件的？

解釋結果和現象

點選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);

列印順序是什麼

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

useLayoutEffect/componentDidMount和useEffect的區別是什麼

class App extends React.Component {
  componentDidMount() {
    console.log('mount');
  }
}

useEffect(() => {
  console.log('useEffect');
}, [])

如何解釋demo_4、demo_8、demo_9出現的現象

react原始碼解析1.開篇介紹和麵試題