1.開篇介紹和面試題
2.react的設計理念
3.react原始碼架構
4.原始碼目錄結構和除錯
5.jsx&核心api
6.legacy和concurrent模式入口函式
7.fiber架構
8.render階段
9.diff演算法
10.commit階段
11.生命週期
12.狀態更新流程
13.hooks原始碼
14.手寫hooks
15.scheduler&lane
16.concurrent模式
17.context
18事件系統
19.手寫迷你版react
20.總結&第一章的面試題解答
import react from "react";
import reactdom from "react-dom";
let workinprogresshook;//當前工作中的hook
let ismount = true;//是否時mount時
const fiber = ;
const dispatcher = (() => ,
memoizedstate: null,//當前state
next: null//下乙個hook
};if (!fiber.memoizedstate) else
workinprogresshook = hook;//記錄當前工作的hook
return workinprogresshook;
} function updateworkinprogresshook()
function usestate(initialstate) else
let basestate = hook.memoizedstate;//初始狀態
if (hook.queue.pending) while (firstupdate !== hook.queue.pending);//通過update的action計算state
hook.queue.pending = null;//重置update鍊錶
}hook.memoizedstate = basestate;//賦值新的state
return [basestate, dispatchaction.bind(null, hook.queue)];//usestate的返回
} return ;
})();
function dispatchaction(queue, action) ;
if (queue.pending === null) else
queue.pending = update;//更新queue.pending
ismount = false;//標誌mount結束
workinprogresshook = fiber.memoizedstate;//更新workinprogresshook
schedule();//排程更新
} let [count, setcount] = dispatcher.usestate(1);
let [age, setage] = dispatcher.usestate(10);
return (
<>
clicked times
setcount(() => count + 1)}> add count
age is
setage(() => age + 1)}> add age
);}function schedule()
schedule();
Vue原始碼解析06 手寫自己的Vue
最近一段時間一直在研究 vue 的原始碼,突然間想寫乙個乞丐的 vue 實現,為了理一下自己的思路,同時也作為乙個階段性的總結.vue 雙向繫結看這裡 vue2.0 1.0 雙向資料繫結簡單來說就是利用了 object.defineproperty 和觀察者模式對 data 資料進行資料劫持.廢話不...
React原始碼解析
距離第一篇 react原始碼解析 一 已經過去將近4個月的時間，由於是我第一次進行原始碼解析相關的寫作，思路和文筆還不夠成熟。一百多天以來，我基於讀者反饋反思這幾篇文章中的不足，同時也在不斷學習借鑑其他優秀作者的寫作方法和寫作思路。最終總結出對於自己的原始碼寫作來說，需要改進的幾點 1.示例 太多 ...
React原始碼剖析 手寫React合成事件機制
之前剖析過vue中的ast的實現和dom diff的實現。這裡來到react,說說react的事件機制 這裡通過原始碼抽離react事件處理核心，手寫react事件處理方法 不和原始碼完全一樣，當基本思路及實現流程相同 上 定義addevent方法為dom物件新增事件 引數1 需要繫結事件的dom節...