南京建筑人才招聘网,seo建站需求,赣州网站建设新闻,win不用iis做网站摘要
在上一篇#xff0c;我们实现了通过JSX转换为ReactElement的方法#xff0c;也看到了转换后React元素的结构。但是这个React元素#xff0c;并不能很清楚的表达组件之间的关系#xff0c;以及属性的处理。
所以在React内部#xff0c;会将所有的React元素转换为Fil…摘要
在上一篇我们实现了通过JSX转换为ReactElement的方法也看到了转换后React元素的结构。但是这个React元素并不能很清楚的表达组件之间的关系以及属性的处理。
所以在React内部会将所有的React元素转换为Filber树。而这一章节主要就是简单描述一下FilberNode的结构。
首先看一下一颗Filber树是什么样子的 在这张图里出了filberRootNode其他的节点都是FilberNode类型hostRootFilber就是最外层的FilberNode。
在项目里面当我们调用 **ReactDOM.createRoot(root)**方法的时候就会创建出上面的FilberRootNode和hostRootFilber。并且将二者之间的指向关系确定。
1.FilberNode
首先说一下一个FilberNode都具有什么属性这里有省略。
【1】tag属性
我们回到React元素可以知道React元素的type可以是一个divspan等也可以是一段文本text也可以是一个函数function函数类型组件。
在FilberNode里面对应的就是tag属性这里我们定义好tag都可以是什么属性
const FunctionComponent FunctionComponent; //对应函数
const HostRoot HostRoot; //对应hostRootFilber
const HostComponent HostComponent; //对应div
const HostText HostText; //对应文本节点这里面多了一个HostRoot类型对应的是最外层FilberNode也就是HostRootFilber的tag。
【2】key属性
对应的就是ReactElement中的key。
【3】stateNode属性
这个属性就比较重要了我们思考一下不管React内部怎么做最终的结果一定是生成真实的DOM。 而这个属性就是保存每个FilberNode的真实DOM。 hostRootFilber的stateNode指向最外面的filberRootNode。
【4】type属性
对应的就是ReactElement中的type。
【5】ref属性
对应的就是ReactElement的ref属性
【6】return sibling childindex属性
前三个属性分表代表FilberNode的父节点兄弟节点子节点。通过这三个属性来确定整颗Filber树的结构。 index属性代表的就是同级节点的位置。例如一个父节点下面有很多子节点index就代表它们的索引。
【7】alternate属性
在React内部会维护两棵Filber树current树是用来渲染真实DOM而B树是在更新时通过计算生成的新的Filber树。每次更新都会用新的Filber树替换current树成为新的current树。 所以每个FilberNode都有一个alternate属性用来指向另一棵树的对应节点。
【8】pendingProps属性
用来表示FilberNode初始的props值
【9】memoizedProps属性
用来表示更新后FilberNode的props值
【10】memoizedState属性
和更新相关的属性。
目前我们先准备这些属性等后面如果有需要了再加现在我们实现FilberNode类
export class FilberNode {constructor(tag, pendingProps, key) {this.tag tag;this.key key;this.stateNode null;this.type null;this.return null;this.sibling null;this.child null;this.index 0;this.ref null;this.pendingProps pendingProps;this.memoizedProps null;this.memoizedState null;this.alternate null;}
}2.FilberRootNode
我们最开始说过FilberRootNode并非是FilberNode。它有着自己的数据结构现在我们说一下FilberRootNode具有的属性
【1】container属性
对应的就是挂载的React元素例如 项目中的App 。
【2】current属性
指向最外层的FilberNode也就是hostRootFilber。而hostRootFilber的stateNode指向FilberROOtNode。
【3】finishWork属性
该属性对应的是已经处理完后的最外层的FilberNode。
现在我们实现对应的FilberRootNode类
export class FilberRootNode {constructor(container, hostRootFilber) {this.container container;this.current hostRootFilber;hostRootFilber.stateNode this;this.finishedWork null;}
}它的构造函数接受两个参数分别对应的就是hostFilberRoot以及App。在构造函数中表明自身和hostFilberRoot之间的关系。
3.定义ReactDOM
现在我们已经有了FilberNode和FilberRootNode的数据结构。现在我们来回想一下我们在项目中是怎么使用ReactDOM的。 const root document.getElementById(‘root’) ReactDOM.createRoot(root).render() 也就是我们要实现的ReactDOM中要有createRoot方法同时该方法返回一个render方法 function createRoot() {return {render() {}}
}const ReactDOM {createRoot
}export default ReactDOM4.实现createRoot方法
这一篇文章只是为了定义好开头所以我们只实现基本的结构。 在调用createRoot方法后我们会创建FilberRootNode对象这里面我们封装成一个方法 createContainer方法
function createContainer(root) {const hostRootFilber new FilberNode(HostRoot, {}, )return new FilberRootNode(root, hostRootFilber);
}5.小节测试
这一篇主要就说这些通过构建filberNode和filberRootNode来表示整个Filber树的结构。 测试代码 import { FilberNode, FilberRootNode } from ./filberNode
import {HostComponent, HostRoot, HostText, FunctionComponent} from ./filberNodefunction createRoot(root) {const filberRootNode createContainer(root);console.log(filberRootNode);return {render() {}}
}function createContainer(root) {const hostRootFilber new FilberNode(HostRoot, {}, )return new FilberRootNode(root, hostRootFilber);
}const ReactDOM {createRoot
}export default ReactDOM在控制台我们可以看到二者之间的关系
