① 最新的Reactos源代碼不支持ms編譯了嗎
可以直接下載RosBE，然後在VS的命令提示符下運行配置文件，生成一個編譯target，然後進去用ninja編譯。這些工具rosbe都打包好了的，不用自己編譯，另外我嘗試用2010 2012 2013 編譯都可以成功，涉及到語言編碼問搜態題的是出在
D:\Project\OSDev\ReactOS\Src\cmake\尺做localization.cmake
把其中的set(I18N_LANG all)改成set(I18N_LANG en-US)
然後D:\Project\OSDev\ReactOS\Src\dll\keyboard\CMakeLists.txt
add_subdirectory(kbs)
add_subdirectory(kbsa)
以外的行，重新進行ninja，然後就可以順利編譯不用改那個代碼頁，改那個代陵漏衡碼頁會造成一些嚴重的中文兼容性問題。
② React 源碼探源 3 Update 的整體流程
書接上一章節: React 源碼探源蘆段 2 Mount 復雜的例子 .
參考上文提到的 fibre tree，如下
值基手得注意的是，雖然事件是從 button 中觸發，最終也是觸發了 button 的 onClick 回調函數。整體的事件處理卻不是從 button 的 DOM 節點觸發。卻是
commitMutationEffects 會檢陪鋒譽查 fiber 的 flag 和 subtreeFlag 執行對應的更新操作。本階段的更新過程會在後續的序列中繼續探究。
③ React 源碼（三）使用本地依賴庫
在 React 應用中依賴基本上是通過 yarn 或者 npm 進行安裝的，但是在看源碼的過程中，有的時候想要去調試，或者說列印一些數據，如果可以在本地的 React 應用裡面依賴本地的 React 倉庫，那麼就可以進行上述的操作了。
在 React 官方文檔中的開發流程 裡面介紹了如何使用本地依賴庫。
在啟動本地 React 項目的時候出現了以下報錯
在將 react-jsx-dev-runtime.development.js 文件復制到 build/node_moles/react/cjs 目錄下即可。
④ useMemo - React源碼解析（四）
原文鏈接： https://www.jianshu.com/p/1df8300333f7
本文主要講React Hook之一的useMemo。
useMemo是一個非常有用的Hook，其實現非常簡單的。
Mount階段
Mount階段(也是初始化階段，實例第一次執行到該鉤子的過程)，useMemo完成以下工作：
創建一個新的Hook實例；
計算傳入useMemo回調函數的值；
將計算結果以及結果的依賴記錄到Hook實例對象的memoizedState屬性。畢察液
返回回調函數的值。
Update階段
在Update階段與Mount階段的處理邏輯是不同的。
獲取沒沒Mount階段創建的Hook實例
比較兩次依賴手物的值是否相同
如果兩次依賴的值相同，直接返回上一次的計算的結果
如果兩次依賴的值不相同，則再次進行計算，並記錄結果，返回新的結果。
Rerender階段
Rerender階段中的邏輯與Update階段一樣。這里略過不講。
React中對is的實現在shared包中：在支持Object.is的情況下直接調用Object.is函數; 不支持的情況下，是自實現的Object.is邏輯。
⑤ React 源碼探源 1 Mount
React 在上一周(2021年6月8日) 出了 18 beta ，作為一個資深 React 玩家，如果未能通讀過 React 源碼，出門都不好意思跟人打招呼。本系列是筆者通讀 React 17 源碼的一個嘗試。
本系列並不是 React 官方作者的行為，有些結論是處於筆者自己的理解，如有不當或者遺漏請各位老師和同學指正。
本系列盡量在完整的主題上切分主題。然而因為 React 源碼的復雜度，這幾無可能。如果未能做到完整的切分，本文應盡量做到各個文章之間的無關性。
從頭自己來讀 React 的源碼是一件很有挑戰的事情，而且有可能誤入歧途。本文並不是從頭開始自己來，主要參考了 Youtube 的 React Source Code Walkthrough 。 需要的同學請自行帶梯子。
本文所有的源碼都參考於 react repo , 使用的版本是 17.0.3 , Commit 是
如要探尋 React 源碼，需要本地編譯啟動 React 源碼，請參考 React 官方文檔
一般來講，開發環境都是完備的，筆者只是安裝了 JDK 。
在開始之前，需要保證
首先我們打開 fixtures/packaging/babel-standalone/dev.html ，可以看到頁面的渲染結果:
一般來講，React 將整個 Mount 過程分解為 Render 和 Commit 過程，Render 的過程主要在 workLoopSync 完成，Commit 過程主要在 commitRoot 中完成。
實際上觀察調用棧可以發現，在 Render 之前， React 還有調用了 ，這個過程目前發現的主要工作是給 ReactDOM 掛載點初始化事件監聽，就是在 listenToAllSupportedEvents 中完成的工作。
本階段主要是創建 fiber tree，以及 fiber tree 對應的 DOM Tree，每個 fiber 對應於一個 work，對應一個 React 節點。
渲染的 fiber tree 可以在 ReactDOM 的 DOM 的根結點查看到:
本系列後續會通過更多的例子來探究 Fiber 樹的結構，現在可以先說一下現在筆者發現的一些結論。
Fiber 樹中使用 child 表述子節點，通過 return 表述父節點，通過 sibling 表述兄弟節點。通過 stateNode 表述關聯的 DOM 節點。
Fiber 樹實際上有兩個，相互之間通過 alternate 連接。在 commit 之前，fiber 樹根的 current 下面還沒有子節點，當整體渲染結束以後，fiber 樹根的 current 會指向當前的 current.alternate .
Commit 階段會將現在的 fiber tree 渲染到 DOM 樹中，並且執行組件中可能的 effect。本系列會用更多的例子來探究 Commit 的過程。
⑥ React 設計理念
React 的函數調用棧可以分為三個部分
對應 react 源碼調度體系的三個模塊
React 是一個可以滿足構建快速響應 web 應用程序的庫
制約快速響應的因素主要是 計算能力 和 網路延遲 也就是CPU 和 IO
React 的刷新頻率是 60Hz 也就是 1000ms/60Hz=16.6ms 瀏覽器刷新一次
在這 16.6 ms 的過程中，瀏寬搜覽器要做三件事情：
如果，JS 腳本執行時間過長，那麼就沒有時間執行樣式布局和樣式繪制，這樣瀏覽器就會出現卡頓的情況
為了解決這種情況，React 採用的方法是： 將同步的更新更改為非同步可中斷的更新
也就是，React 和瀏覽器做了一個約定，瀏覽器在每一幀都預留給 React 一定時間進行樣式布局和樣式繪制，如果某一項工作需要的時間比較長，React 會中斷自己的工作，把控制權交還給瀏覽器，等待下一幀預留的時間，繼續之前中斷的工作
在一些需要請求數據結果才能做出響應的場景下，React 為實現快速響應的解決辦法是：將人機交互的研究的結果整合到真實的 UI 中
React15 的架構中分為兩部分，一部分決定渲染什麼組件，另一部分決定將組件渲染到視圖中
也就是 Reconciler（協調器）和 Renderer（渲染器）
在 Reconciler 中會將新舊組件做一個對比，找到要更新的組件，然後把組件交給 Renderer，不同的渲染器會把組件渲染到不同環境中
也就是：協調器找到更新，渲染器更新 DOM
但是，如果採用非同步可中斷的更新這種方式，這種架構就會導致更新的卡頓
比如，有一個列表，需要把 1，2，3 更新到 2，4，6，到更新完 1 --> 2，這個時候中斷了更新，那麼用戶看到的就是 2，2，3
在新架構中，React 新增了一個 Scheler（調度器）
這個調度器可以把需要更新的模塊分好優先順序，高優先順序的任務可以優先進入協調器，如果這個時候有更高優先順序的更新，那麼前面那個任務會被中斷
協調器完成 diff 操作，更新會進入渲染器
完成渲染後，調度器會開始新一輪的調度
舉個例子，三個 li 顯示 1，慎信歷2，3，坦陸現在要把他們更新為 4，5，6，大概過程為：
Fiber 一共有三層含義
新架構中的協調器是基於 Fiber 節點實現的，稱為 Stack Reconciler
在這里，Fiber 是纖程的意思，和進程（Process）線程（Thread）協程（Coroutine）同為操作系統中的執行過程
它可以實現
每個 Fiber 節點對應一個組件，這個節點保存了關於這個組件的一些屬性，這也就是我們常說的虛擬 DOM
Fiber 保存了組件需要更新的狀態以及需要執行的副作用
Fiber 架構中，採用了雙緩存機制，雙緩存就是，在 內存 中構建好要更新的內容，然後替換上一幀的內容
舉個例子：
當首次 render 的時候，會創建一個 FiberRootNode 節點，這是整個應用的根節點，還會創建當前應用的根節點 RootFiber ， FiberRootNode 的 current 指向 RootFiber
接下來， 首屏渲染時 ，會再創建一棵 Fiber 樹，叫做 workInProcessFiber 樹
當 workInProcessFiber 樹完成渲染時， FiberRootNode 的 current 就指向 workInProcessFiber 樹
當更新導致的渲染時候，會再創建一個 workInProcessFiber 樹，在這個過程中，會將 current Fiber 和返回的 jsx 結構作對比，這個過程也就是 diff 演算法
然後， FiberRootNode 的 current 會指向新生成的 workInProcessFiber 樹
⑦ 【原創】react-源碼解析 - Component&Ref（3）
看到這個api想必大家再熟悉不過了，平常我們在react開發過程中寫的組件都是繼承自這個Component組件，比如我們在聲明ClassComponent的時候extends的就是React.Component,在看源碼只是我個人覺得寫個class應該實現了很多復雜的功能比如說setState和render方法等，但是看了源碼之後顛覆了我之前的認知： Component
在源碼中Component方法只是簡單的對props和context進行了賦值操作，這兩個傳入的參數我們都很熟悉，最後這個updater參數我們我們接觸到。通過源碼我們看到在Component的原型上聲明了setState方法：
該函數內部只是判斷了傳入參數的合法性最後調用了Component中updater方法上的enqueueSetState。然後方法結束，這里去查了一下資料，這個方法具體的實現是在react-dom中完成的。為什麼要這樣做呢，因為在react中只是簡單的提供了這個方法的入口，具體的調用需要看你在哪個平台下使用，比如在react-dom中和在react-native中的調用肯定是不同的。在原型上也聲明了:
// forceUpdate-強制更新組件State方法
看到這里我們發現只是調用了updater 的enqueueForceUpdate方法，個人認為跟字面意思一樣，對state的進行了答緩毀強制更新操作。PureComponent的用法我們不必再去贅述，該方法實際就是對Component方法進行了繼承，但是多加了一個屬性：
// 在原型上添加一個額外的isPureReactComponent屬性/，標識是一個pureComponent
isPureReactComponent用來說明是一個PureComponent。最後將這兩個方法導出，到這里我們有關Componet的源碼已經完結了，我們看到在react中其實沒有太多復雜的操作，只是對傳入參數的賦值，已經留下了一些函數入口。像更新渲染等操作實際都放在了react-dom中去完成。
在開發中我們通常會有這樣的需求，有時候我們需要獲取某個Dom節點或者拿到classComponent類型的子組件的實例，進而操作清備這個子組件。比如說我們需要通過在父級組件中調用到子組件中的方法，從而更新子組件，這里的更新就不僅僅局限於更新props，通常我們跟新props也不需要獲得子組件的實例。 這里通過ref這個屬性會讓我們很容易操作子組件。
一般在現有版本中有三種使用ref的方法：
（1）string 類型ref ref="string" == {不推薦，下個大版本會廢棄}
（2）function類型 ref = {ele => (this.childRef = ele )}
（3）React.createRef()
大致用法類似於這個樣子，需要注意的是我們在使用ref時候，如果目標組件是一個function類型的Component一般來說這個時候拿到的ref肯定是undefined，因為functionComponent是沒有實例的，後面我們會介紹一個叫做forward-ref的屬性，這個屬性可以讓我們取到函數類型組件上去使用ref。接下來我們去看看createRef方法的源碼： createRef
這里的源碼很簡單只是創建了一個refObject在上面聲明了一個為null的currenrt屬性。然後將這個對象返回。其實這個源碼看到這里也看不出ref到底是怎麼哪搏掛載在組件的this上面的。這里應該是在react更新的過程中實現的，react中只有更新到結束一個完整的流程，至於到底是怎麼掛載的ref我們接著往下讀。
了解更多： react-source-code
⑧ 【原創】react-源碼解析 - forward-ref&context（4）
通常我們會通過ref去獲取Dom節點的實例，或者ClassComponent的實例,但是，如果我么們的組件是一個function類型的component，由於functionComponent是沒有實例的所以我們在使用的時候也相應的取不到改組件的this，當然ref也一樣。這時react為我們提供了一個forwardRef方法:
通過這種方式創建的函數類型的組件，使我們能夠在函數中繼續使用ref屬性，當然我們在實際的應用的中也不會傻到去取函數類型組件的ref，因為我們知道它是沒有實例的。但是，當我們在使用其他庫提供的組件的時候，我們可能並不知道這個這個組件的類型，這時如果能夠合理的使用這個方法將會為我們省去不必要的麻煩，同時這里也有HOC的思想在裡面。接收一個組件，返回對原組件進行包裝的新的組件。接下來我們去看看方法的源碼： forwardRef 源碼很簡單，改方法返回了一個Oject具有render屬性，同時$$typeof為"react.forward_ref"的Symbol值。
這里可能存在對於type屬性的概念混淆。我們一定不能認為使用forward創建出的組件的$$typeof屬性為:'react.forward_ref'。我們使用forwardRef創建的組建的額時候，實際是將上面例子中的TargetCom作為參數傳入到CreateElement方法中的，實際返回的element中的$$typeof還是REACT_ELEMENT_TYPE, 也就是說這里我們將TargetCom{創建出的對象--具有render和$$typeof屬性}傳入，其中CreateElement的type屬性為forward方法返回的那個對象，也就是說在type對象裡面有個叫做$$typeof的屬性這個屬性的鍵值為:'react.forward_ref',
在後安的渲染過程中有很多判斷，其中有一些就是更具$$typeof展開的，這里我們一定要搞清楚凡是通過CreateElement創建的組件的$$typeof屬性都為: 'REACT_ELEMENT_TYPE'。
這里我們還是按照慣例對api進行一下簡單的說明，我們知道在react中是通過props屬性來實現組件間通信的，這種通信方式存在的問題在於，雖然父子組件之間通信很方便但是當我們的組件嵌套層級很深，這時候如果使用props傳參就不太現實了，首先中間層的組件不一定是你自己寫的其次中間層組件聲明的props對於這些組件本身沒有任何意義，這個時候我們就需要使用context方法幫助我們實現多級組件之間的通信。我們在頂層組件中提供了context對象之後，所有的後代組件都可以訪問這個對象。以此達到跨越多層組件傳遞參數的功能。在react當前版本中有兩種實現context的方式：
（1）ParentComponent.childContextTypes{} == {不推薦，下個大版本會廢棄}
（2）const { Provider, Consumer } = React.createContext('default');
在使用childContextTypes時候我們需要在父級組件中聲明一個getChildContext的方法，該方法返回一個對象，這個對象就是我們需要傳給後代組件的context對象。當我們在使用第一種方法的時候我們需要在組件上聲明context對象中屬性的類型，有些類似於react的PropTypes類型檢測。同時需要在使用到context的後代組件中聲明contextTypes類似於下面這種寫法：
如果不這樣聲明的話，在後代組價中是取不到context對象的。這里我們需要注意的是我們在子組件中使用context的時候，需要哪個屬性就必須去contextTypes中聲明，因為改組件的上級組件不止一個上級組件中的context也不止一個。而createContext方法的使用就簡化了很多，首先我們看到改方法返回兩個對象Provider, Consumer分別為context的提供方和訂閱方：
在上層組件中聲明之後，在想用到context的後代組件中國使用Consumer包括起來就可以訪問到之前聲明的context： ReactContext
從源碼中我們可以看到CreateContext方法創建了一個對象改對象有一個_currenValue屬性記錄context的變化，這個對象Provider屬性中聲明context，然後使改對象的Consumer屬性指向對象本身，我們在使用Consumer的時候就直接從context的currenValue上去取值。以上就是react中的Createcontext方法的實現原理，當然實際過程並沒有這么簡單，至於具體的實現我們接著往下看。同時這里我們也需要注意該對象下的$$typeof屬性並不是用來替換ReactElement中的$$typeof, 與我們之前將到的forwardRef中聲明的$$typeof一樣都只是我們傳入CreateElement方法中type屬性上的內容。
了解更多： react-source-code
⑨ 深入理解React16之：（一）.Fiber架構
React16雖然出了一陣子了。剛出來的時候，粗略看了一遍更新文檔。以為沒什麼大的改動，也聽說項目從react15-16的升級過度可以很平滑，再加上項目改版上線一直比較頻繁，所以一直還用的15.6的版本。
偶然在知乎看到@程墨Morgan大神的live，便抱著好奇心和學習的心態報名了，受益良多。
我理解的Fiber架構：
在我之前的一篇文章有簡單介紹， 閱讀react源碼--記錄：1.1 問題記錄
下面從一個具體實例理解一下，再加上我畫了圖，應該很好理解啦~（圖畫的有點渣）
假如有A,B,C,D組件，層級結構為：
我們知道組件的生命周期為：
掛載階段：
那麼在掛載階段，A,B,C,D的生命周期渲染順序是如何的呢？
以render()函數為分界線。從頂層組件開始，一直往下，直至最底層子組件。然後再往上。
組件update階段同理。
————————
前面是react16以前的組建渲染方式。這就存在一個問題，
好似一個潛水員，當它一頭扎進水裡，就要往最底層一直游，直到找到最底層的組件，然後他再上岸。在這期間， 岸上發生的任何事，都不能對他進行干擾，如果有更重要的事情需要他去做（如用戶操作），也必須得等他上岸
看一下fiber架構 組建的渲染順序
潛水員會每隔一段時間就上岸，看是否有更重要的事情要做。
加入fiber的react將組件更新分為兩個時期
這兩個時期以render為分界，
phase1的生命周期是可以被打斷的，每隔一段時間它會跳出當前渲染進程，去確定是否有其他更重要的任務。此過程，React 在 workingProgressTree （並不是真實的virtualDomTree）上復用 current 上的 Fiber 數據結構來一步地（通過requestIdleCallback）來構建新的 tree，標記處需要更新的節點，放入隊列中。
phase2的生命周期是不可被打斷的，React 將其所有的變更一次性更新到DOM上。
這里最重要的是phase1這是時期所做的事。因此我們需要具體了解phase1的機制。
這樣的話，就和react16版本之前有很大區別了，因為可能會被執行多次，那麼我們最好就得保證phase1的生命周期 每一次執行的結果都是一樣的 ，否則就會有問題，因此， 最好都是純函數。
對了，程墨大神還提到一個問題，飢餓問題，即如果高優先順序的任務一直存在，那麼低優先順序的任務則永遠無法進行，組件永遠無法繼續渲染。這個問題facebook目前好像還沒解決，但以後會解決~
所以，facebook在react16增加fiber結構，其實並不是為了減少組件的渲染時間，事實上也並不會減少，最重要的是現在可以使得一些更高優先順序的任務，如用戶的操作能夠優先執行，提高用戶的體驗，至少用戶不會感覺到卡頓~
⑩ react更新15.5.0版本後，一直報warning，這個antd是要何時修復
1.准備:npm安裝以下組件a.安裝react/antd:npminstallreactreact-domantd--saveb.安裝webpack/less:npminstallwebpackless--save-devwebpack根據需要選擇使用-g安裝判升c.安裝babel-loader以及其他相關package:npminstallbabel-loaderbabel-corebabel-preset-es2015babel-preset-react--save-devd.選擇安裝style-loader/css-loadernpminstallstyle-loadercss-loader--save-dev2.配置webpack.config.js具體配置可以查看webpack提供的例子，主要依賴的是babel-loaderbabel-loader上也有webpack.config.js應該如何編寫的例子，傳送門:babel-loader3.編寫我們的文件(例如:demo-antd.jsx)只使用了antd提供的Button組件。只使用了antd提供的Button組件。ps:對比import{Button}from'antd';和importButtonfrom'antd/lib/button';後者不會將antd中所有的內容都引入，如果你只是需要Button這么一種組件的話，推薦使用後一種寫法。4.執行構建webpack./demo-antd.jsxdemo-antd-bundle.js將生成demo-antd-bundle.js文件5.在頁面中引入bundle文件(demo-antd-bundle.js)執行到正沖昌這一步，在瀏覽器中查看頁面可以應該可以看到一個原生樣式的button元素，因為antd並沒有將樣式使用內聯style的方式寫入js文件中。這里我們暫時將問題一擱置，來看看問題二：組件庫的內部機制舉扒。因為沒有深入去看過antd的源代碼，沒法詳細說明antd的在代碼編寫上的一些.怎麼說，就是『代碼為什麼這樣寫』這個問題，有興趣的話，可以去查看源碼，正如@陳吉浩所說，查看github上的代碼比npm下載後的代碼更舒服。