① 最新的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下载后的代码更舒服。