哪个网站做漫画可以有钱,山西做网站推广,公司logo设计logo,wordpress个人博客模板摘要
经过之前的几篇文章#xff0c;我们实现了基本的jsx#xff0c;在页面渲染的过程。但是如果是通过函数组件写出来的组件#xff0c;还是不能渲染到页面上的。 所以这一篇#xff0c;主要是对之前写得方法进行修改#xff0c;从而能够显示函数组件#xff0c;所以现…摘要
经过之前的几篇文章我们实现了基本的jsx在页面渲染的过程。但是如果是通过函数组件写出来的组件还是不能渲染到页面上的。 所以这一篇主要是对之前写得方法进行修改从而能够显示函数组件所以现在我们在index.js文件中修改一下jsx的写法。修改成函数组件
import jsx from ../src/react/jsx.js
import ReactDOM from ../src/react-dom/indexconst root document.querySelector(#root);function App() {return jsx(div, {ref: 123,children: jsx(span, {children: 456})});
}ReactDOM.createRoot(root).render(App /)这里因为需要使用我们自己的jsx方法。所以在App里面返回的依旧是通过之前的方式进行调用。
1.修改reconcileChildren方法
我们来回忆一下在beginWork阶段我们主要是通过ReactElement创建FilberNode。而reconcileChildren就是创建FilberNode的方法。
在之前我们只处理了HostText类型和HostComponent类型所以在这个方法里面我们要对函数类型进行兼容而作为函数组件的ReactElment它最显而易见的特点就是type的值是一个函数。
例如上面的App组件对应的ReactElement的type就是App。所以我们可以通过type来判断组件的类型
function reconcileChildren(element) {let tag;if(typeof element.type function) {tag FunctionComponent}//其他代码console.log(filberNode)return filberNode
}我们打印一下看看这个函数组件是否满足预期 2.updateFunctionComponent方法
现在有了tag为FunctionComponent类型的FilberNode在beginWork里面我们就要对这个类型的FilberNode进行处理
function beginWork(nowFilberNode) {switch (nowFilberNode.tag) {//其他代码case FunctionComponent: {return updateFunctionComponent(nowFilberNode)}//其他代码}
}现在我们来实现updateFunctionComponent方法。 之前对于HostComponent类型的FilberNode它的子节点其实就是它对应的ReactElement。
但是对于函数类型的FilberNode我们想一下不就是它自己的返回值嘛所以我们直接调用这个函数就能拿到它的子FilberNode了。
function updateFunctionComponent(filberNode) {const nextChildren filberNode.type();const newFilberNode reconcileChildren(nextChildren);filberNode.child newFilberNode;newFilberNode.return filberNode;beginWork(newFilberNode)
}2.修改completeWork方法
对于completeWork方法 它的主要作用目前是给对应的FilberNode增加stateNode而函数组件并没有自己对应的StateNode所以直接继续递归就可以了
export const completeWork (filberNode) {const tag filberNode.tagswitch (tag) {//其他代码。。。case FunctionComponent: {completeWork(filberNode.child)}}
}3.修改commitWork方法
对于之前的commitWork我们是直接将最外层的FilberNode的stateNode挂载了容器上现在由于最外层的可能是FunctionComponent它是没有自己的stateNode的。所以我们要找到具有stateNode的最外层FilberNode。
import { HostComponent } from ./filberNode;export function commitWork(filberRootNode) {const container filberRootNode.container;let node filberRootNode.finishedWork;while( node.tag ! HostComponent ){node node.child}container.appendChild(node.stateNode)
}OK经过上面的修改我们的App组件也可以正常渲染了。
