Translating 504 words of Facebook React
Translating 504 words of Facebook React
Today I finished translating implementation-notes.md from 44% to 55% total of 504 words.
You may check my activity on this link: https://crowdin.com/project/react/fil/activity
- And here are the few Examples of my translation:
Ngayon, ang pagpapagana ng
unmountTree()
, o pagpapagana ngmountTree()
ng paulitulit, ay nag tatangal ng lumang tree at pinapagana angcomponentWillUnmount()
ng lifcycle hook sa mga komponent. implementation-notes.md 03:32 AM
function mountTree(element, containerNode) { // Wasakin ang anumang umiiral na tree if (containerNode.firstChild) { unmountTree(containerNode); } // Gumawa ng top-level na panloob na instance var rootComponent = instantiateComponent(element); // Mag-mount ng top-level na komponent sa isang konteyner var node = rootComponent.mount(); containerNode.appendChild(node); // I-save ang reperensya sa panloob na instance node._internalInstance = rootComponent; // Ibalik ang pangpublikong instance na ibinigay nito var publicInstance = rootComponent.getPublicInstance(); return publicInstance; } implementation-notes.md 03:30 AM
Amin ding tuturuan angmountTree()
na wasakin ang anumang umiiral na tree kaya matatawag ito ng makailang ulit: implementation-notes.md 03:28 AM
Aming babaguhin angmountTree()
para magdagdag ng_internalInstance
na katangian sa isang root ng node ng DOM. implementation-notes.md 03:27 AM
Para mapagana ito, kailangan naming basahin ang panloob na root instance mula sa isang node ng DOM. implementation-notes.md 03:26 AM
function unmountTree(containerNode) { // Basahin ang panloob na instance mula sa isang node ng DOM: // (Ito ay hindi pagumagana, kinakailangan pa naming baguhin ang mountTree() para mai-imbak ito.) var node = containerNode.firstChild; var rootComponent = node._internalInstance; // I-unmount ang tree at linisin ang konteyner rootComponent.unmount(); containerNode.innerHTML = ''; } implementation-notes.md 03:25 AM
Kami ay makapagdaragdag na ng mga bagong top-level na punsyon na tinatawag naunmountTree(containerNode)
na kapareho ngReactDOM.unmountComponentAtNode()
: implementation-notes.md 03:24 AM
Sa praktika, ang pag-unmount ng mga komponent ng DOM ay nakapag tatangal din ng mga event listeners at nililinis ang ilang mga cache, ngunit aming nilalagpasan ang mga gayong detalye. implementation-notes.md 03:22 AM
class DOMComponent { // ... unmount() { // I-unmount lahat ng children var renderedChildren = this.renderedChildren; renderedChildren.forEach(child => child.unmount()); } } implementation-notes.md 12:46 AM
Para saDOMComponent
, ang pag-unmount ay nag sasabi sa bawat child na mag-unmount: implementation-notes.md 12:46 AM
unmount() { // Tawagin ang lifecycle na hook kung kinakailangan var publicInstance = this.publicInstance; if (publicInstance) { if (publicInstance.componentWillUnmount) { publicInstance.componentWillUnmount(); } } // I-unmount ang nag iisang na-render na komponent var renderedComponent = this.renderedComponent; renderedComponent.unmount(); } } implementation-notes.md 12:45 AM
class CompositeComponent { // ... implementation-notes.md 12:45 AM
Ngayon na mayroon na tayong panloob na mga instance na humahawak sa kanilang mga children at mga node ng DOM, maari na tayong mag implementa ng unmounting. Sa isang composite na komponent, ang unmounting ay tumatawag ng lifecycle na hook at mga recurse. implementation-notes.md 12:45 AM
function mountTree(element, containerNode) { // Gumawa ng top-level na panloob na instance var rootComponent = instantiateComponent(element); // I-mount ang top-level na komponent sa konteyner var node = rootComponent.mount(); containerNode.appendChild(node); // Ibalik ang pang publikong instance na ibinigay nito var publicInstance = rootComponent.getPublicInstance(); return publicInstance; } var rootEl = document.getElementById('root'); mountTree(<App />, rootEl); implementation-notes.md 12:43 AM
Nag babalik ito ng pang publikong instance, katilad din ngReactDOMrender()
: implementation-notes.md 12:39 AM
[object CompositeComponent] { currentElement: <App />, publicInstance: null, renderedComponent: [object CompositeComponent] { currentElement: <Button />, publicInstance: [object Button], renderedComponent: [object DOMComponent] { currentElement: <div />, node: [object HTMLDivElement], renderedChildren: [] } } } implementation-notes.md 12:39 AM
Para mailarawan ito, kung ang punsyon na<App>
na komponent ay nag-rerender ng<Button>
na class na komponent, at angButton
na nag rerender ng class ay<div>
, ang panloob na instance tree ay kahawig nito: implementation-notes.md 12:39 AM
Bilang resulta, bawat panloob na instance, composite o host, ngayon ay pumupunto sa kanilang chald internal na mga instance. implementation-notes.md 12:37 AM
Amin ding ginagamit sila sa pag-aaply ng hindi-makapinsalang mga update sa hinaharap. implementation-notes.md 12:36 AM
Ang pangunahing diperansya pagkatapos ng refactoring mula samountHost()
ay amin nang pinapanatili angthis.node
atthis.renderedChildren
na nakaugnay sa panloob na instance ng komponent ng DOM. implementation-notes.md 12:36 AM
var renderedChildren = children.map(instantiateComponent); this.renderedChildren = renderedChildren; // Kolektahin ang mga node ng DOM na kanilang ibinalik sa mount var childNodes = renderedChildren.map(child => child.mount()); childNodes.forEach(childNode => node.appendChild(childNode)); // Ibalik ang DOM bilang isang resulta ng mount return node; } }
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]
wow it verry good
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