前端React结构工程-改写render

工程准备事项

npm install
cnpm
初始化工程实例

以上是实例化，安装过npm后的列表
接下来使用 npm run start 来启动项目
当你启动项目后会看到react给我们准备好的默认界面
React中的 diff原理和调度原理是这次探索的目标
只有搞明白这些，才能合理的利用react开发项目

我们实际使用的项目是子集中的子集 d2
首先打开默认工程中的 package.json

在 scripts中可以看到
“start”: “react-scripts start”
“build”: “react-scripts build”
“test”: “react-scripts test”
“eject”: “react-scripts eject”
那么从目录的react-scripts 接着向上溯源

"bin": {"react-scripts": "./bin/react-scripts.js"},"dependencies": {"file-loader": "6.1.1","fs-extra": "^9.0.1","react-app-polyfill": "^2.0.0","react-dev-utils": "^11.0.3","react-refresh": "^0.8.3",},"devDependencies": {"react": "^17.0.1","react-dom": "^17.0.1"},

bin=>react-scripts 是执行的索引目录
react-scripts在首次调用到的时候执行一次，或编译时运行
使用的 npm run start 会在这里解释为触发的语句
如果想要增加额外的触发语句，可自行增加api(event)
在这里插入图片描述
file-loader 和fs-extra是关联使用的，对于改写render来说没多大实际意义。所以这里就过了
这里找到 require-render-return 和 no-require-return-value 将里面的 render改写为自定义的参数。
并在html中利用原型查看其原型，是否符合推测与更改的代码。
在这里插入图片描述
经过修改后，直接 npm run start一下
console.log的结果是 object对象.原型.的方法为什么要说原型，一会大家就知道了
请添加图片描述
接下来索引进入到 react-Dom里面查看源码并改写

…/node_modules/react-dom/cjs目录下的就是 react的核心
react-dom.development.js 以下的操作均是对该文件进行溯源修改的
REACT_ELEMENT_TYPE =0xeac7=react.element
如果你写过React的类组件，每一个类组件都是要继承于React.Component的。因此，如果我们在react.element中进行溯源
请添加图片描述
这句话就是

 判断(类型 新子集 ==='对象'&&新子集 !== 空){switch(新子集.类型){c 变量 =创建一个元素来自 element[渲染](子集，返回的.根,穿透)}}

在react.element创建好新子集后，它必然是需要props出去的
接下来看它的pops，中间是默认传递了key。这就证明他内部的props是独一无二的，是肯定可以修改的
请添加图片描述

以上的原理我就搞明白了，谁是父元素的原型。
我们调用的是子集中的子集。你在写组件的关联都是类似的树循环。

最后将你传递的值进行类型判断
如果最初的 function不是 object类型的话，就会报错
并且这里的 Function 不是蓝色的，是绿色的
基本上到这里溯源就结束了。已经知道的

react.render 是从哪里起始的调用
element是如何渲染的
react是如何调度的
很多函数是关联的，不要只看命名就不去溯源
因为其中很多importa的会误导

扩展：react的更多溯源

retryTimeOutBoundary 渲染重绘
markRootUpdated 节点重绘
resolverRetryWakeable 虚拟Dom的different
在这里插入图片描述
captureCommitPhaseError 替换过时的Dom
captureCommitPhaseErrorOnRoot 替换过时的DOM在Root中