Translating 520 words of Facebook React, implementation-notes.md
Translating 520 words of Facebook React, implementation-notes.md
Today I finished translating implementation-notes.md total of 520 words.
- I start at 77%
- And finish at 89%
You may check my activity on this link: https://crowdin.com/project/react/fil/activity
- And here are the few Examples of my translation:
Ang reconciler ay na implementa rin ng suporta para sa
setState()
sa composite na mga komponent. Maramihang pag-update sa loob ng mga event handler ay ginu-grupo-grupo sa isahang pag-update. implementation-notes.md 09:34 PM
Ang logica ng pag-update ng listahan ng children ay nagmula sa isang labanan na tinatawag naReactMultiChild
na ginagamit sa implementasyon sa class ng panloob na instance sa parehont React DOM at React Native. implementation-notes.md 09:33 PM
Halimbawa, Sinabi ng React DOM sa reconciler na gumamit ngReactDOMComponent
bilang implementasyon sa panloob na intance ng host. implementation-notes.md 09:30 PM
Ang mga renderer ay gumagamit ng injection para makalusot sa panloob na class ng host sa reconciler. implementation-notes.md 09:29 PM
Kanilang ini-rerepresinta ang mga node ng text at ang "empty slots" na makukuha mo sa pag-reder ngnull
. implementation-notes.md 09:28 PM
Sa karagdagan sa composite at panloob na instance ng mga class sa host, mayroon din namang mga class para sa "text" at "empty" na mga komponent. implementation-notes.md 09:27 PM
Ang laki ng ka-kumplikaduhan sa aktwal na implementasyon ng React ay may kinalaman doon. implementation-notes.md 09:26 PM
Binabasa din ng reconciler angkey
mula sa mga elemento, at ginagamit ito upang makapagtatag ng mga korespandeng panloob na instance na elemento sa isang aray. implementation-notes.md 09:25 PM
Ang mga komponent ay maaring mag-render ngnull
, at ang reconciler ay kayang mag handle ng "walang laman na mga puwang" sa mga array at na-render nang output. implementation-notes.md 09:13 PM
Ang dokumentong ito ay mas pinasimple kumpara sa tunay na codebase. Merong ilang mga importanteng aspeto na hindi namin binanggit: implementation-notes.md 08:49 PM
Ano Ang Aming Inalis implementation-notes.md 08:48 PM
Ito ay ang mga pangunahin kung paanong ang React ay gumagana sa panloob. implementation-notes.md 08:48 PM
var rootEl = document.getElementById('root'); mountTree(<App />, rootEl); // Muling paggamit sa umiiral ng DOM: mountTree(<App />, rootEl); implementation-notes.md 08:47 PM
Ngayon ay ang pagtawag ngmountTree()
ng dalawang beses na may parehong uri ay hindi nakakasira: implementation-notes.md 08:46 PM
function mountTree(element, containerNode) { // Mag-tsek sa umiiral ng tree if (containerNode.firstChild) { var prevNode = containerNode.firstChild; var prevRootComponent = prevNode._internalInstance; var prevElement = prevRootComponent.currentElement; // Kung kaya namin, muling gamitin ang umiiral nang komponent ng root if (prevElement.type === element.type) { prevRootComponent.receive(element); return; } // Kung hindi, I-unmount ang umiiral ng tree unmountTree(containerNode); } // ... implementation-notes.md 08:45 PM
Ngayon na ang parehongCompositeComponent
atDOMComponent
ay ipinatupad angeceive(nextElement)
na metod, maaari nating baguhin ang top-level namountTree()
na punsyon para gamitin kapag ang elementongtype
ay kapareho ng kung ano sya dati: implementation-notes.md 08:43 PM
Mga update ng Top-Level implementation-notes.md 08:41 PM
At ito ay para sa pag-update ng mga komponent ng host. implementation-notes.md 08:41 PM
while (operationQueue.length > 0) { var operation = operationQueue.shift(); switch (operation.type) { case 'ADD': this.node.appendChild(operation.node); break; case 'REPLACE': this.node.replaceChild(operation.nextNode, operation.prevNode); break; case 'REMOVE': this.node.removeChild(operation.node); break; } } } } implementation-notes.md 08:40 PM
// I-proseso ang linya ng operasyon. implementation-notes.md 08:40 PM
At sa huling hakbang, aming isinagawa ang mga operasyon ng DOM. Muli, ang totoong code ng reconciler ay mas komplikado dahil hinahawakan din nito ang mga galaw: implementation-notes.md 08:40 PM
this.renderedChildren = nextRenderedChildren; // ... implementation-notes.md 08:36 PM
prevChild.receive(nextChildren[i]); nextRenderedChildren.push(prevChild); } // Sa wakas, maa-unmount na ang kahit anong children na di umiiral: for (var j = nextChildren.length; j < prevChildren.length; j++) { var prevChild = prevRenderedChildren[j]; var node = prevChild.node; prevChild.unmount(); // I-record na kailangan nating tanggalin ang node operationQueue.push({type: 'REMOVE', node}); } // Ituro ang listahan ng na-render na children sa na-update nang bersyon. implementation-notes.md 08:36 PM
if (!canUpdate) { var prevNode = prevChild.node; prevChild.unmount(); var nextChild = instantiateComponent(nextChildren[i]); var nextNode = nextChild.mount(); // Record that we need to swap the nodes operationQueue.push({type: 'REPLACE', prevNode, nextNode}); nextRenderedChildren.push(nextChild); continue; } // If we can update an existing internal instance, // just let it receive the next element and handle its own update. implementation-notes.md 08:29 PM
var canUpdate = prevChildren[i].type === nextChildren[i].type; // Kung hindi natin ma-update ang umiiral na instance, kailangan nating i-unmount ito // at mag-mount ng bago kesa ito. implementation-notes.md 08:29 PM
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @ruah I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x