React Fiberプログレッシブ
4524 ワード
私の公開番号
はじめに
前に書いた記事では、React Fiberの原理は、React Fiberの実現原理を紹介していますが、ここでの鍵は
二、Stock Reconciler
以下のコンポーネントツリーがあると仮定します.
対応するJSコードは以下の通りです.
次に私たちはフィパーのデータ構造を使ってエルゴードプロセスを書き換えます.最初にデータ構造を定義し、次いで巡回中に
経過を詳しく見てみます.または、以前の
次に、
本論文では、デモを通して、
Talk
に注目してください.最新の記事を取得します.はじめに
前に書いた記事では、React Fiberの原理は、React Fiberの実現原理を紹介していますが、ここでの鍵は
Fiber
チェーンのデータ構造を使用して、再帰的なStack Reconciler
をループのFiber Reconciler
に書き換えることです.今日は手書きでデモを作ります.Fiber
チェーンを巡る実現方法を詳しく説明します.二、Stock Reconciler
以下のコンポーネントツリーがあると仮定します.
対応するJSコードは以下の通りです.
const a1 = {name: 'a1'};
const b1 = {name: 'b1'};
const b2 = {name: 'b2'};
const b3 = {name: 'b3'};
const c1 = {name: 'c1'};
const c2 = {name: 'c2'};
const d1 = {name: 'd1'};
const d2 = {name: 'd2'};
a1.render = () => [b1, b2, b3];
b1.render = () => [];
b2.render = () => [c1];
b3.render = () => [c2];
c1.render = () => [d1, d2];
c2.render = () => [];
d1.render = () => [];
d2.render = () => [];
Stack Reconciler
の再帰的な方法を使用してコンポーネントツリーを巡回するのは、おそらくこのようなことである.function doWork(o) {
console.log(o.name);
}
function walk(instance) {
doWork(instance);
const children = instance.render();
children.forEach(walk);
}
walk(a1);
// :a1, b1, b2, c1, d1, d2, b3, c2
二、ファイバーReconciler次に私たちはフィパーのデータ構造を使ってエルゴードプロセスを書き換えます.最初にデータ構造を定義し、次いで巡回中に
link
方法によってノード間の関係を作成する.// Fiber
class Node {
constructor(instance) {
this.instance = instance;
this.child = null;
this.sibling = null;
this.return = null;
}
}
//
function link(parent, children) {
if (children === null) children = [];
// child
parent.child = children.reduceRight((previous, current) => {
const node = new Node(current);
node.return = parent;
// sibling
node.sibling = previous;
return node;
}, null);
return parent.child;
}
巡回した後、次のような関係チェーンが得られます.経過を詳しく見てみます.または、以前の
walk
およびdoWork
の方法名をそのまま使用します.function doWork(node) {
console.log(node.instance.name);
//
const children = node.instance.render();
return link(node, children);
}
function walk() {
while (true) {
let child = doWork(node);
if (child) {
node = child;
continue;
}
if (node === root) {
return;
}
while (!node.sibling) {
if (!node.return || node.return === root) {
return;
}
node = node.return;
}
node = node.sibling;
}
}
const hostNode = new Node(a1);
const root = hostNode;
let node = root;
walk();
// :a1, b1, b2, c1, d1, d2, b3, c2
上は再帰的に循環を変えるコードです.ループの終了条件は、現在の処理のノードがルートノードに等しいことがわかる.サイクルが開始されると、深さ優先で層を一つ下に進める.サブノードと兄弟ノードがない場合、現在ノードは上のノードに遡り、ルートノードに至るまで遡る.次に、
requestIdleCallback
APIを結合する方法を見てみます.漸進的なエルゴードを実現します.このエルゴードを完了するには時間が短すぎるので、3つのノードを処理する毎に、sleep
1秒を経過し、現在のrequestIdleCallback
を終了する目的を達成してから、新しいコールバックタスクを作成します.function sleep(n) {
const start = +new Date();
while(true) if(+new Date() - start > n) break;
}
function walk(deadline) {
let i = 1;
while (deadline.timeRemaining() > 0 || deadline.didTimeout) {
console.log(deadline.timeRemaining(), deadline.didTimeout);
let child = doWork(node);
if (i > 2) {
sleep(1000);
}
i++;
if (child) {
node = child;
continue;
}
if (node === root) {
console.log('================ Task End ===============');
return;
}
while (!node.sibling) {
if (!node.return || node.return === root) {
console.log('================ Task End ===============');
return;
}
node = node.return;
}
node = node.sibling;
}
console.log('================ Task End ===============');
requestIdleCallback(walk);
}
requestIdleCallback(walk);
// :
15.845 false
a1
15.14 false
b1
14.770000000000001 false
b2
================ Task End ===============
15.290000000000001 false
c1
14.825000000000001 false
d1
14.485000000000001 false
d2
================ Task End ===============
14.96 false
b3
14.475000000000001 false
c2
================ Task End ===============
三、まとめ本論文では、デモを通して、
React Fiber
のデータ構造をどのように利用するかを説明し、再帰的にループを変更し、コンポーネントツリーの漸進的な遍歴を実現する.