![\"React](\"/static/d96fec10d250eace9756f09543bf5d58/00d43/implementation-notes-tree.png\")
\n \n \n \n Esta seção é um conjunto de notas de implementação para o reconciliador de pilha.
\nEla é bastante técnica e assume um forte entendimento da API pública do React, assim como da sua divisão em núcleos, renderizadores e o próprio reconciliador. Se você não estiver muito familiarizado com o código do React, leia a visão geral da base de código primeiro.
\nTambém é pressuposto o entendimento da diferença entre componentes React, suas instâncias e elementos.
\nO reconciliador de pilha foi usado no React 15 e em versões anteriores. Está localizado em src/renderers/shared/stack/reconciler.
\nPaul O’Shannessy deu uma palestra sobre construir React do zero que muito inspirou esse documento.
\nTanto este texto quanto a palestra são simplificações da real base de código, então se familiarizar com os dois pode resultar em um entendimento melhor.
\nO reconciliador em si não possui uma API pública. Renderizadores como o React DOM e React Native usam-no para atualizar a interface do usuário de acordo com os componentes React escritos pelo usuário.
\nVamos considerar a primeira vez que você monta um componente:
\nReactDOM.render(<App />, rootEl);O React DOM passará <App /> para o reconciliador. Lembre-se que <App /> é um elemento React, isto é, uma descrição do quê renderizar. Você pode pensar nele como um simples objeto:
console.log(<App />);\n// { type: App, props: {} }O reconciliador irá verificar se App é uma classe ou uma função.
Se App for uma função, o reconciliador chamará App(props) para obter o elemento renderizado.
Se App for uma classe, o reconciliador instanciará App com new App(props), chamará o método de ciclo de vida componentWillMount(), e por fim chamando o método render()` para obter o elemento renderizado.
De qualquer forma, o reconciliador saberá em que elemento o App foi “renderizado”.
Esse processo é recursivo. App talvez seja renderizado para um <Greeting />, Greeting talvez seja renderizado para um <Button />, e assim por diante. O reconciliador irá “investigar” os componentes definidos pelo usuário recursivamente enquanto ele aprende para o quê cada um será renderizado.
Você pode imaginar esse processo como um pseudo-código:
\nfunction isClass(type) {\n // Subclasses React.Component possuem essa flag\n return (\n Boolean(type.prototype) &&\n Boolean(type.prototype.isReactComponent)\n );\n}\n\n// Essa função recebe um elemento React (e.g. <App />)\n// e retorna um DOM ou nó Nativo representando a árvore montada.\nfunction mount(element) {\n var type = element.type;\n var props = element.props;\n\n // Nós vamos determinar o elemento renderizado\n // executando o tipo como função\n // ou criando uma instância e chamando render().\n var renderedElement;\n if (isClass(type)) {\n // Componente de classe\n var publicInstance = new type(props);\n // Define as props\n publicInstance.props = props;\n // Chama o ciclo de vida se necessário\n if (publicInstance.componentWillMount) {\n publicInstance.componentWillMount();\n }\n // Obtêm o elemento renderizado ao chamar render()\n renderedElement = publicInstance.render();\n } else {\n // Componente de função\n renderedElement = type(props);\n }\n\n // Esse processo é recursivo pois um componente pode\n // retornar um elemento com o tipo de outro componente.\n return mount(renderedElement);\n\n // Nota: essa implementação é incompleta e recorre infinitamente!\n // Ela só lida com elementos <App /> ou <Button />.\n // Ela não lida com elementos como <div /> ou <p /> ainda.\n}\n\nvar rootEl = document.getElementById('root');\nvar node = mount(<App />);\nrootEl.appendChild(node);\n\nNota:
\nIsso realmente é um pseudocódigo. Não é semelhante a implementação real. Causará um estouro de pilha porque não discutimos quando parar a recursão.
\n
Recapitulando alguns conceitos chaves do exemplo acima:
\nApp) e as props.App) podem ser classes ou funções mas todos eles “se renderizam” a um elemento.<App />).Esse processo seria inútil se o resultado não fosse renderizar algo na tela.
\nAlém dos componentes definidos pelo usuário (“compostos”), elementos React podem também representar componentes (“hospedeiros”) para plataformas específicas. Por exemplo, Button pode retornar uma <div /> no seu método render.
Se a propriedade type for uma string, estamos lidando com um elemento hospedeiro:
console.log(<div />);\n// { type: 'div', props: {} }Não há código definido pelo usuário associado com elementos do tipo hospedeiro.
\nQuando o reconciliador encontra um elemento hospedeiro, ele permite que o renderizador cuide da montagem. Por exemplo, o React DOM criaria um nó do DOM.
\nSe o elemento hospedeiro possuir filhos, o reconciliador recursivamente os monta seguindo o mesmo algoritmo descrito acima. Não importa se os filhos são hospedeiros (como <div><hr /></div>) ou se são compostos (como <div><Button /></div>), ou os dois.
Os nós DOM produzidos pelos componentes filhos serão anexados ao nó DOM pai, e, recursivamente, a completa estrutura DOM será construída.
\n\n\nNota:
\nO reconciliador em si não está ligado ao DOM. O exato resultado da montagem (por vezes chamada de “mount image” no código fonte) depende do renderizador, e pode ser um nó do DOM (React DOM), uma string (React DOM Server), ou um número representando uma view nativa (React Native).
\n
Se fôssemos estender o código para lidar com elementos hospedeiros, ficaria assim:
\nfunction isClass(type) {\n // Subclasses React.Component possuem essa flag\n return (\n Boolean(type.prototype) &&\n Boolean(type.prototype.isReactComponent)\n );\n}\n\n// Essa função apenas lida com elementos do tipo composto.\n// Por exemplo, ela lida com <App /> e <Button />, mas não com uma <div />.\nfunction mountComposite(element) {\n var type = element.type;\n var props = element.props;\n\n var renderedElement;\n if (isClass(type)) {\n // Componente de classe\n var publicInstance = new type(props);\n // Define as props\n publicInstance.props = props;\n // Chama o ciclo de vida se necessário\n if (publicInstance.componentWillMount) {\n publicInstance.componentWillMount();\n }\n renderedElement = publicInstance.render();\n } else if (typeof type === 'function') {\n // Componente de função\n renderedElement = type(props);\n }\n\n // Isso é recursivo mas eventualmente chegaremos no fim da recursão quando\n // o elemento for o hospedeiro (e.g. <div />) ao invés de composto (e.g. <App />):\n return mount(renderedElement);\n}\n\n// Essa função apenas lida com elementos do tipo hospedeiro.\n// Por exemplo, ela lida com <div /> e <p /> mas não com um <App />\nfunction mountHost(element) {\n var type = element.type;\n var props = element.props;\n var children = props.children || [];\n if (!Array.isArray(children)) {\n children = [children];\n }\n children = children.filter(Boolean);\n\n // Esse bloco de código não deveria estar no reconciliador.\n // Renderizadores diferentes podem inicializar nós diferentemente.\n // Por exemplo, React Native iria criar views de iOS ou Android.\n var node = document.createElement(type);\n Object.keys(props).forEach(propName => {\n if (propName !== 'children') {\n node.setAttribute(propName, props[propName]);\n }\n });\n\n // Monta os filhos\n children.forEach(childElement => {\n // Filhos podem ser hospedeiros (e.g. <div />) ou compostos (e.g <Button />).\n // Também os montaremos recursivamente:\n var childNode = mount(childElement);\n\n // Essa linha de código também é específica do renderizador.\n // Ela seria diferente dependendo do renderizador:\n node.appendChild(childNode);\n });\n\n // Retorna o nó do DOM como resultado da montagem.\n // Aqui é onde a recursão acaba.\n return node;\n}\n\nfunction mount(element) {\n var type = element.type;\n if (typeof type === 'function') {\n // Componentes definidos pelo usuário\n return mountComposite(element);\n } else if (typeof type === 'string') {\n // Componentes de plataformas específicas\n return mountHost(element);\n }\n}\n\nvar rootEl = document.getElementById('root');\nvar node = mount(<App />);\nrootEl.appendChild(node);Isto funciona mas ainda está longe de como o reconciliador é realmente implementado. O ingrediente que falta é o suporte para atualizações.
\nA característica principal do React é que você pode re-renderizar tudo, e ele não irá recriar o DOM ou resetar o estado.
\nReactDOM.render(<App />, rootEl);\n// Deve reutilizar o DOM existente:\nReactDOM.render(<App />, rootEl);Contudo, a nossa implementação acima apenas sabe como montar a árvore inicial. Ela não executa atualizações na árvore pois não armazena todas as informações necessárias, como todas as publicInstances, ou quais nós do DOM correspondem a qual componente.
O código do reconciliador de pilha resolve isso fazendo a função mount() um método e a colocando em uma classe. Existem desvantagens para essa abordagem, e nos iremos na direção oposta na atual reescrita do reconciliador. No entanto, é assim que funciona atualmente.
Ao invés de funções mountHost e mountComposite separadas, nós criaremos duas classes: DOMComponent e CompositeComponent.
Ambas as classes possuem um construtor aceitando o element, assim como um método mount() retornando o nó montado. Nós iremos trocar a função de nível superior mount() com uma factory que instancia a classe correta.
function instantiateComponent(element) {\n var type = element.type;\n if (typeof type === 'function') {\n return new CompositeComponent(element);\n // Componentes definidos pelo usuário\n } else if (typeof type === 'string') {\n // Componentes de plataformas específicas\n return new DOMComponent(element);\n } \n}Primeiro, vamos considerar a implementação de CompositeComponent:
class CompositeComponent {\n constructor(element) {\n this.currentElement = element;\n this.renderedComponent = null;\n this.publicInstance = null;\n }\n\n getPublicInstance() {\n // Para componentes compostos, exponha a instância da classe.\n return this.publicInstance;\n }\n\n mount() {\n var element = this.currentElement;\n var type = element.type;\n var props = element.props;\n\n var publicInstance;\n var renderedElement;\n if (isClass(type)) {\n // Componente de classe\n publicInstance = new type(props);\n // Define as props\n publicInstance.props = props;\n // Chama o ciclo de vida se necessário\n if (publicInstance.componentWillMount) {\n publicInstance.componentWillMount();\n }\n renderedElement = publicInstance.render();\n } else if (typeof type === 'function') {\n // Componente de função\n publicInstance = null;\n renderedElement = type(props);\n }\n\n // Salva a instância pública\n this.publicInstance = publicInstance;\n\n // Instancia a instância interna filha de acordo com o elemento.\n // Seria algo como um DOMComponent para <div /> ou <p />,\n // e um CompositeComponent para <App /> ou <Button />:\n var renderedComponent = instantiateComponent(renderedElement);\n this.renderedComponent = renderedComponent;\n\n // Monta o output renderizado\n return renderedComponent.mount();\n }\n}Isso não é muito diferente da nossa implementação anterior de mountComposite, mas agora podemos salvar algumas informações, como this.currentElement, this.renderedComponent, e this.publicInstance , para usar durante atualizações.
Note que uma instância de CompositeComponent não é a mesma coisa que uma instância de um element.type fornecida pelo usuário. CompositeComponent é um detalhe de implementação do nosso reconciliador e nunca é exposto para o usuário. A classe definida pelo usuário é quem lê de element.type e CompositeComponent cria uma instância dela.
Para evitar confusão, nós vamos chamar instâncias de CompositeComponent e DOMComponent de “instâncias internas”. Elas existem para que possamos associá-las a alguns dados de longa vida. Apenas o renderizador e o reconciliador sabem que elas existem.
Em contraste, nós chamamos uma instância de uma classe definida pelo usuário uma “instância pública”. A instância pública é o que você vê como this no render() e outros métodos de seus componentes customizados.
A função mountHost(), refatorada para ser um método mount() na classe DOMComponent, também é familiar:
class DOMComponent {\n constructor(element) {\n this.currentElement = element;\n this.renderedChildren = [];\n this.node = null;\n }\n\n getPublicInstance() {\n // For DOM components, only expose the DOM node.\n return this.node;\n }\n\n mount() {\n var element = this.currentElement;\n var type = element.type;\n var props = element.props;\n var children = props.children || [];\n if (!Array.isArray(children)) {\n children = [children];\n }\n\n // Cria e salva o nó\n var node = document.createElement(type);\n this.node = node;\n\n // Define os atributos\n Object.keys(props).forEach(propName => {\n if (propName !== 'children') {\n node.setAttribute(propName, props[propName]);\n }\n });\n\n // Cria e salva os filhos contidos.\n // Cada um deles pode ser um DOMComponent ou um CompositeComponent\n // dependendo se o tipo do elemento é uma string ou uma função.\n var renderedChildren = children.map(instantiateComponent);\n this.renderedChildren = renderedChildren;\n\n // Coleta nos DOM retornados na montagem\n var childNodes = renderedChildren.map(child => child.mount());\n childNodes.forEach(childNode => node.appendChild(childNode));\n\n // Retorna o nó do DOM como resultado da montagem\n return node;\n }\n}A diferença principal depois de refatorar mountHost() é que agora nós podemos deixar this.node e this.renderedChildren associados com a instância interna do componente DOM. Nós também os usaremos para aplicar atualizações não destrutivas no futuro.
Como resultado, cada instância interna, composta ou hospedeira, agora aponta para sua instância interna filha. Para auxiliar na visualização disso, se o componente de função <App> renderiza um componente de classe, e a classe Button renderiza a <div>, a árvore da instância interna ficaria assim:
[object CompositeComponent] {\n currentElement: <App />,\n publicInstance: null,\n renderedComponent: [object CompositeComponent] {\n currentElement: <Button />,\n publicInstance: [object Button],\n renderedComponent: [object DOMComponent] {\n currentElement: <div />,\n node: [object HTMLDivElement],\n renderedChildren: []\n }\n }\n}No DOM você apenas veria a <div>. No entanto, a árvore da instância interna possui ambas instâncias internas: composta e hospedeira.
A instância interna composta precisa armazenar:
\nDOMComponent ou um CompositeComponent.A instância interna hospedeira precisa armazenar:
\nDOMComponent ou um CompositeComponent.Se você está tendo dificuldades para imaginar como uma árvore de instâncias internas é estruturada em aplicações mais complexas, React DevTools pode te dar uma boa aproximação, pois instâncias hospedeiras são marcadas com cinza, e instâncias compostas com roxo:
\n\n \n \n \n \n\n \n \n \n \n \nPara completar essa refatoração, nós vamos introduzir a função que monta a árvore completa em um nó contêiner, assim como faz ReactDOM.render(). Ela retorna uma instância pública, também como ReactDOM.render() faz.
function mountTree(element, containerNode) {\n // Create a instância interna de nível superior\n var rootComponent = instantiateComponent(element);\n\n // Monta o componente de nível superior no contêiner\n var node = rootComponent.mount();\n containerNode.appendChild(node);\n\n // Retorna a instância pública que é provida\n var publicInstance = rootComponent.getPublicInstance();\n return publicInstance;\n}\n\nvar rootEl = document.getElementById('root');\nmountTree(<App />, rootEl);Agora que temos instâncias internas que possuem seus filhos e nós do DOM, podemos implementar a desmontagem. Para um componente composto, desmontar executa um método do ciclo de vida em recursão.
\nclass CompositeComponent {\n\n // ...\n\n unmount() {\n // Chama o método de ciclo de vida se necessário\n var publicInstance = this.publicInstance;\n if (publicInstance) {\n if (publicInstance.componentWillUnmount) {\n publicInstance.componentWillUnmount();\n }\n }\n\n // Desmonta o componente renderizado\n var renderedComponent = this.renderedComponent;\n renderedComponent.unmount();\n }\n}Para o DOMComponent, desmontar pede para que todo filho se desmonte:
class DOMComponent {\n\n // ...\n\n unmount() {\n // Desmonta todos os filhos\n var renderedChildren = this.renderedChildren;\n renderedChildren.forEach(child => child.unmount());\n }\n}Na prática, desmontar componentes DOM também remove os event listeners e limpa alguns caches, mas vamos pular esses detalhes.
\nPodemos agora adicionar uma nova função de alto nível chamada unmountTree(containerNode) que é semelhante a ReactDOM.unmountComponentAtNode().
function unmountTree(containerNode) {\n // Lê a instância interna de um nó do DOM:\n // (Isso ainda não funciona, nós vamos precisar mudar mountTree() para guarda-la)\n var node = containerNode.firstChild;\n var rootComponent = node._internalInstance;\n\n // Desmonta a árvore e limpa o contêiner\n rootComponent.unmount();\n containerNode.innerHTML = '';\n}Para que isso funcione, nós precisamos ler uma instância interna raiz de um nó do DOM. Nós vamos modificar mountTree() para adicionar a propriedade _internalInstance ao nó do DOM raiz. Nós também ensinaremos a mountTree() como destruir qualquer árvore existente para que ela possa ser chamada múltiplas vezes:
function mountTree(element, containerNode) {\n // Destrói qualquer árvore existente\n if (containerNode.firstChild) {\n unmountTree(containerNode);\n }\n\n // Cria a instância interna de nível superior\n var rootComponent = instantiateComponent(element);\n\n // Monta o componente de nivel superior no contêiner\n var node = rootComponent.mount();\n containerNode.appendChild(node);\n\n // Salva uma referência para a instância interna\n node._internalInstance = rootComponent;\n\n // Retorna a instância pública que é provida\n var publicInstance = rootComponent.getPublicInstance();\n return publicInstance;\n}Agora, executando unmountTree() ou executando mountTree() repetidamente, removerá a árvore antiga e em seguida executa o método de ciclo de vida componentWillUnmount() nos componentes.
Na seção anterior, nós implementamos a desmontagem. Contudo, o React não seria muito útil se cada mudança de prop desmontasse e montasse a árvore toda. O objetivo do reconciliador é reutilizar instâncias existentes quando possível para preservar o DOM e o estado:
\nvar rootEl = document.getElementById('root');\n\nmountTree(<App />, rootEl);\n// Deve reutilizar o DOM existente:\nmountTree(<App />, rootEl);Nós iremos estender esse contrato da instância interna com mais um método. Alem do mount() e unmount(), ambos DOMComponent e CompositeComponent vão implementar um novo método chamado receive(nextElement):
class CompositeComponent {\n // ...\n\n receive(nextElement) {\n // ...\n }\n}\n\nclass DOMComponent {\n // ...\n\n receive(nextElement) {\n // ...\n }\n}Sua responsabilidade é fazer o que for necessário para atualizar o componente (e qualquer um de seus filhos) com a descrição dada pelo nextElement.
Essa é a parte geralmente descrita como “diff do DOM virtual” embora o que realmente acontece é que andamos pela árvore interna recursivamente e permitimos que cada instância receba uma atualização.
\nQuando um componente composto recebe um novo elemento, nós executamos o método de ciclo de vida componentWillUpdate().
Então re-renderizamos o componente com as novas props, e capturamos o próximo elemento renderizado:
\nclass CompositeComponent {\n\n // ...\n\n receive(nextElement) {\n var prevProps = this.currentElement.props;\n var publicInstance = this.publicInstance;\n var prevRenderedComponent = this.renderedComponent;\n var prevRenderedElement = prevRenderedComponent.currentElement;\n\n // Atualiza *o próprio* elemento\n this.currentElement = nextElement;\n var type = nextElement.type;\n var nextProps = nextElement.props;\n\n // Descobre qual é o próximo resultado do render()\n var nextRenderedElement;\n if (isClass(type)) {\n // Componente de classe\n // Chama o ciclo de vida se necessário\n if (publicInstance.componentWillUpdate) {\n publicInstance.componentWillUpdate(nextProps);\n }\n // Atualiza as props\n publicInstance.props = nextProps;\n // Re-renderiza\n nextRenderedElement = publicInstance.render();\n } else if (typeof type === 'function') {\n // Componente de função\n nextRenderedElement = type(nextProps);\n }\n\n // ...Após isso, nós podemos olhar para o type do elemento renderizado. Se o type não mudou desde a última renderização, o componente abaixo também pode ser atualizado.
Por exemplo, se retorna <Button color="red" /> na primeira vez, e <Button color="blue" /> na segunda vez, nós podemos apenas dizer a instância interna correspondente para receber (receive()) o segundo elemento:
// ...\n\n // Se o tipo do elemento renderizado não mudou\n // reutilize a instância existente do componente e retorne.\n if (prevRenderedElement.type === nextRenderedElement.type) {\n prevRenderedComponent.receive(nextRenderedElement);\n return;\n }\n\n // ...Contudo, se o próximo elemento renderizado possuir um type diferente do anterior, não podemos atualizar a instância interna. Um <button> não pode “se tornar” um <input>.
Nesse caso, temos que desmontar a instância interna existente e montar a nova correspondente ao tipo do elemento renderizado. Por exemplo, é isso que acontece quando um componente que previamente renderizava um <button /> renderiza um <input />:
// ...\n\n // Se chegamos nesse ponto, nós precisamos desmontar o componente\n // montado anteriormente, montar o novo, e trocar seus nós.\n\n // Encontra o nó antigo pois será necessário trocá-lo\n var prevNode = prevRenderedComponent.getHostNode();\n\n // Desmonta o filho antigo e monta o novo\n prevRenderedComponent.unmount();\n var nextRenderedComponent = instantiateComponent(nextRenderedElement);\n var nextNode = nextRenderedComponent.mount();\n\n // Substitui a referência ao filho\n this.renderedComponent = nextRenderedComponent;\n\n // Substitui o nó antigo com o novo\n // Nota: isso é código específico do renderizador e\n // idealmente deveria viver fora do CompositeComponent\n prevNode.parentNode.replaceChild(nextNode, prevNode);\n }\n}Para resumir isso tudo, quando um componente composto recebe um novo elemento, ele pode ou não delegar a atualização a sua instância interna renderizada, ou a desmontar e montar uma nova em seu lugar.
\nExiste outra condição na qual um componente vai remontar ao invés de receber um elemento, e isso é quando a chave do elemento mudou. Nós não discutimos sobre como lidar com chaves nesse documento pois adicionaria mais complexidade a um tutorial já complexo.
\nNote que nós precisamos adicionar um método chamado getHostNode() ao contrato de uma instância interna para que ela possa localizar o nó específico da plataforma e o trocar durante a atualização. Sua implementação é bem direta para ambas as classes:
class CompositeComponent {\n // ...\n\n getHostNode() {\n // Peça ao componente renderizado para fornecê-lo.\n // Isso irá acessar recursivamente quaisquer elementos compostos.\n return this.renderedComponent.getHostNode();\n }\n}\n\nclass DOMComponent {\n // ...\n\n getHostNode() {\n return this.node;\n } \n}Implementações de componentes hospedeiros, como a de DOMComponent, atualizam de maneira diferente. Quando recebem um elemento, é preciso atualizar a view específica da plataforma subjacente. No caso de React DOM, isso significa atualizar os atributos DOM:
class DOMComponent {\n // ...\n\n receive(nextElement) {\n var node = this.node;\n var prevElement = this.currentElement;\n var prevProps = prevElement.props;\n var nextProps = nextElement.props; \n this.currentElement = nextElement;\n\n // Remove atributos antigos\n Object.keys(prevProps).forEach(propName => {\n if (propName !== 'children' && !nextProps.hasOwnProperty(propName)) {\n node.removeAttribute(propName);\n }\n });\n // Define os próximos atributos.\n Object.keys(nextProps).forEach(propName => {\n if (propName !== 'children') {\n node.setAttribute(propName, nextProps[propName]);\n }\n });\n\n // ...Então, o componente hospedeiro precisa atualizar seus filhos. Diferentemente de componentes compostos, eles podem conter mais de um filho.
\nNeste simples exemplo, nós usamos um array de instâncias internas e iteramos sobre ele, atualizando ou trocando as instâncias internas, dependendo se o type recebido é igual ao type anterior. O verdadeiro reconciliador também leva a chave do elemento em conta e rastreia movimentos, além de inserções e deletes, mas omitiremos essa lógica.
Nós coletamos operações DOM feitas em nós filhos em uma lista para que possamos executá-las em lotes:
\n // ...\n\n // Esses são vetores de elementos React:\n var prevChildren = prevProps.children || [];\n if (!Array.isArray(prevChildren)) {\n prevChildren = [prevChildren];\n }\n var nextChildren = nextProps.children || [];\n if (!Array.isArray(nextChildren)) {\n nextChildren = [nextChildren];\n }\n // Esses são vetores de instâncias internas:\n var prevRenderedChildren = this.renderedChildren;\n var nextRenderedChildren = [];\n\n // À medida que iteramos os filhos, adicionaremos operações ao vetor.\n var operationQueue = [];\n \n // Nota: a seção abaixo está extremamente simplificada!\n // Ela não lida com re-ordenações, filhos com furos, ou chaves.\n // Ela só existe para ilustrar o fluxo geral, não os detalhes.\n\n for (var i = 0; i < nextChildren.length; i++) {\n // Tenta obter uma instância interna existente para esse filho\n var prevChild = prevRenderedChildren[i];\n\n // Se não houver instâncias internas nesse índice,\n // um filho foi anexado até o fim. Cria uma nova instância\n // interna, a monta, e usa seu nó.\n if (!prevChild) {\n var nextChild = instantiateComponent(nextChildren[i]);\n var node = nextChild.mount();\n\n // Grava que precisamos anexar um nó\n operationQueue.push({type: 'ADD', node});\n nextRenderedChildren.push(nextChild);\n continue;\n }\n\n // Nós podemos atualizar a instância apenas se o tipo do elemento for compatível.\n // Por exemplo, <Button size=\"small\" /> pode ser atualizado para\n // <Button size=\"large\" /> mas não para um <App />.\n var canUpdate = prevChildren[i].type === nextChildren[i].type;\n\n // Se não podemos atualizar uma instância existente, temos que desmontá-la\n // e montar uma nova no seu lugar.\n if (!canUpdate) {\n var prevNode = prevChild.getHostNode();\n prevChild.unmount();\n\n var nextChild = instantiateComponent(nextChildren[i]);\n var nextNode = nextChild.mount();\n\n // Lembre que precisamos trocar os nós.\n operationQueue.push({type: 'REPLACE', prevNode, nextNode});\n nextRenderedChildren.push(nextChild);\n continue;\n }\n\n // Se pudermos atualizar uma instância interna existente,\n // deixe-a receber o próximo elemento e lidar com sua própria atualização.\n prevChild.receive(nextChildren[i]);\n nextRenderedChildren.push(prevChild);\n }\n\n // Finalmente, desmonte qualquer filho que não exista:\n for (var j = nextChildren.length; j < prevChildren.length; j++) {\n var prevChild = prevRenderedChildren[j];\n var node = prevChild.getHostNode();\n prevChild.unmount();\n\n // Grave que precisamos remover o nó\n operationQueue.push({type: 'REMOVE', node});\n }\n\n // Aponta a lista de elementos renderizados para a versão atualizada.\n this.renderedChildren = nextRenderedChildren;\n\n // ...Como passo final, nós executamos as operações DOM. Novamente, o código do reconciliador real é mais complexo pois também envolve movimentos:
\n // ...\n\n // Processa a fila de operações.\n while (operationQueue.length > 0) {\n var operation = operationQueue.shift();\n switch (operation.type) {\n case 'ADD':\n this.node.appendChild(operation.node);\n break;\n case 'REPLACE':\n this.node.replaceChild(operation.nextNode, operation.prevNode);\n break;\n case 'REMOVE':\n this.node.removeChild(operation.node);\n break;\n }\n }\n }\n}E isto é a atualização de componentes hospedeiros.
\nAgora que ambos CompositeComponent e DOMComponent implementam o método receive(nextElement), podemos mudar a função mountTree() de nível superior para que seja usada quando o tipo do elemento for o mesmo da última vez:
function mountTree(element, containerNode) {\n // Verifica se há uma árvore existente\n if (containerNode.firstChild) {\n var prevNode = containerNode.firstChild;\n var prevRootComponent = prevNode._internalInstance;\n var prevElement = prevRootComponent.currentElement;\n\n // Se pudermos, reutilizamos o componente raiz existente\n if (prevElement.type === element.type) {\n prevRootComponent.receive(element);\n return;\n }\n\n // Do contrário, desmonte a árvore existente.\n unmountTree(containerNode);\n }\n\n // ...\n\n}Agora executar mountTree() duas vezes com o mesmo tipo não é destrutivo:
\nvar rootEl = document.getElementById('root');\n\nmountTree(<App />, rootEl);\n// Reutiliza o DOM existente:\nmountTree(<App />, rootEl);Esse é o básico de como o React funciona internamente.
\nEsse documento é simples comparado com o código real. Existem alguns aspectos importantes que não abordamos:
\nnull, e o reconciliador pode lidar com “espaços vazios” em arrays e em resultados renderizados.null.ReactDOMComponent como a implementação da instância interna hospedeira.ReactMultiChild que é usada pela implementação da classe de instância interna hospedeira tanto no React DOM quanto no React Native.setState() em elementos compostos. Múltiplas atualizações dentro de manipuladores de eventos são realizadas em uma só atualização.componentDidMount() e componentDidUpdate(), são coletados em “filas de callback” e são executadas em um só lote.ReactMount é onde o código como mountTree() e unmountTree() deste tutorial vive. Ele cuida da montagem e desmontagem de componentes de nível superior. ReactNativeMount é o análogo para React Native.ReactDOMComponent é o equivalente de DOMComponent neste tutorial. Ele implementa o componente de classe hospedeira para o renderizador React DOM.ReactNativeBaseComponent é o análogo para React Native.ReactCompositeComponent é o equivalente de CompositeComponent neste tutorial. Ele lida com a chamada de componentes definidos pelo usuário e manter seu estado.instantiateReactComponent contém o comutador que seleciona a correta classe de instância interna para construir um elemento. É equivalente a instantiateComponent() neste tutorial.ReactReconciler é um wrapper com os métodos mountComponent(), receiveComponent() e unmountComponent(). Ele chama as implementações subjacentes nas instâncias internas, mas também inclui código que é compartilhado por todas as implementações de instâncias internas.ReactChildReconciler implementa a lógica para montar, atualizar e desmontar filhos de acordo com a chave de seus elementos.ReactMultiChild implementa o processamento da fila de operações para inserções, exclusões e movimentações independentemente do renderizador.mount(), receive() e unmount() são chamados de mountComponent(), receiveComponent() e unmountComponent() na base de código React por razões legadas, mas eles recebem elementos._currentElement. Elas são consideradas como campos públicos de apenas leitura em toda a base de código.O reconciliador de pilha tem limitações inerentes, como ser síncrono e incapaz de interromper trabalhos ou dividi-los em partes. Há um projeto em andamento no novo Reconciliador Fiber com uma arquitetura completamente diferente. No futuro, pretendemos substituir o reconciliador de pilha por ele, mas no momento está longe de estar completo.
\nLeia a próxima seção para aprender sobre os princípios orientadores que usamos para o desenvolvimento do React.
","frontmatter":{"title":"Notas de Implementação","next":"design-principles.html","prev":"codebase-overview.html"},"fields":{"path":"content/docs/implementation-notes.md","slug":"docs/implementation-notes.html"}}},"pageContext":{"slug":"docs/implementation-notes.html"}},"staticQueryHashes":[]}