Esta seção fornecerá uma visão geral da organização do código-base React, suas convenções e implementação.
\nSe você quer contribuir para o React, esperamos que este guia ajude você a se sentir mais à vontade para fazer mudanças.
\nNão recomendamos necessariamente nenhuma dessas convenções nos aplicativos React. Muitas delas existem por razões históricas e podem mudar com o tempo.
\nDepois de clonar o repositório do React, você verá algumas pastas no nível superior:
\npackages contém metadados (como package.json) e o código fonte (subdiretório src) para todos os pacotes no repositório React. Se a sua alteração está relacionada ao código, o subdiretório src de cada pacote é onde você passará a maior parte do seu tempo.fixtures contém alguns pequenos aplicativos de teste do React para os contribuidores.build é a saída de compilação do React. Não está no repositório, mas aparecerá no seu clone do React depois de você fizer o build pela primeira vez.A documentação está hospedada em um repositório separado do React.
\nExistem algumas outras pastas no nível superior, mas elas são usadas principalmente para as ferramentas e você provavelmente nunca as encontrará ao contribuir.
\nNós não temos um diretório no nível superior para testes unitários. Em vez disso, nós os colocamos em um diretório chamado __tests__ relativo aos arquivos que eles testam.
Por exemplo, um teste para setInnerHTML.js está localizado em __tests__/setInnerHTML-test.js ao lado dele.
O código-base do React usa console.error para exibir avisos:
if (__DEV__) {\n console.error('Something is wrong.');\n}Os alertas só são ativados no desenvolvimento. Na produção, eles são retirados. Se você precisar impedir a execuçāo de algum caminho do código, use o módulo invariant em vez disso:
var invariant = require('invariant');\n\ninvariant(\n 2 + 2 === 4,\n 'Você não vai passar!'\n);O invariant é lançado quando a condição invariant é false.
“Invariant” é apenas uma maneira de dizer “essa condição sempre é verdadeira”. Você pode pensar nisso como fazer uma afirmação.
\nÉ importante manter o comportamento de desenvolvimento e produção similares. Então o invariant é lançado tanto no desenvolvimento quanto na produção. As mensagens de erro são substituídas automaticamente por códigos de erro em produção para evitar afetar negativamente o tamanho do byte.
Você pode usar a variável pseudo-global __DEV__ no código-base para proteger blocos de código usados apenas no desenvolvimento.
Ele é embutido durante a etapa de compilação e se transforma em verificações process.env.NODE_ENV! == 'production' nos builds do CommonJS.
Para builds autônomas, ele se torna true na build não-minificada e é completamente eliminado com os blocos if que ele guarda na construção minificada.
if (__DEV__) {\n // Esse código vai executar apenas no desenvolvimento.\n}Recentemente, começamos a introduzir verificações do Flow no código-base. Os arquivos marcados com a anotação @ flow no comentário do cabeçalho da licença estão sendo verificados com typecheck.
Aceitamos pull requests adicionando anotações do Flow ao código existente. Anotações de fluxo são assim:
\nReactRef.detachRefs = function(\n instance: ReactInstance,\n element: ReactElement | string | number | null | false,\n): void {\n // ...\n}Quando possível, o novo código deve usar anotações do Flow.\nVocê pode executar o yarn flow localmente para verificar seu código com o Flow.
React é um monorepo. Seu repositório contém vários pacotes separados para que suas alterações possam ser coordenadas em conjunto e os problemas residam em um só lugar.
\nO “core” do React inclui todas as React APIs de nível superior, por exemplo:
React.createElement()React.ComponentReact.ChildrenO core React inclui apenas as APIs necessárias para definir os componentes. Não inclui o algoritmo de reconciliação ou qualquer código específico da plataforma. Ele é usado pelos componentes React DOM e React Native.
\nO código do React core está localizado em packages/react na árvore de origem. Está disponível no npm como o pacote react. A construção do navegador independente correspondente é chamada react.js,e exporta um global chamado React.
O React foi originalmente criado para o DOM, mas depois foi adaptado para também suportar plataformas nativas com o React Native. Isso introduziu o conceito de “renderizadores” para as partes internas do React.
\nOs renderizadores gerenciam como uma árvore no React se transforma nas chamadas de subjacentes da plataforma.
\nRenderizadores tambéms são encontrados em packages/:
React de nível superior e está disponível como pacote npm react-dom. Ele também pode ser usado como um pacote de navegador autônomo chamado react-dom.js que exporta um global do ReactDOM.O único outro renderizador oficialmente suportado é o react-art. Costumava estar em um repositorio GitHub separado mas nós os movemos para a árvore de código principal.
\n\nNota:
\nTecnicamente o
\nreact-native-rendereré uma camada muito fina que ensina o React a interagir com a implementação do React Native. O código específico da plataforma real que gerencia as views nativas reside no repositório do React Native junto com seus componentes.
Até mesmo renderizadores muito diferentes, como o React DOM e o React Native, precisam compartilhar muita lógica. Em particular, o algoritmo de reconciliação deve ser o mais semelhante possível para que a renderização declarativa, os componentes personalizados, o state, os lifecycle méthods e os refs funcionem de maneira consistente em todas as plataformas.
\nPara resolver isso, diferentes renderizadores compartilham algum código entre eles. Nós chamamos essa parte do React de “reconciliador”. Quando uma atualização como setState() está agendado, o reconciliador chama o método render() em componentes na árvore e monta, atualiza ou desmonta.
Os reconciliadores não são empacotados separadamente porque atualmente não possuem uma API pública. Em vez disso, eles são usados exclusivamente por renderizadores como React DOM e React Native.
\nO reconciliador “stack” é a implementação que energiza o React 15 e o anterior. Desde então, paramos de usá-lo, mas está documentado em detalhes na próxima seção.
\nO reconciliador de “fiber” é um novo esforço com o objetivo de resolver os problemas inerentes ao reconciliador de pilha e corrigir alguns problemas de longa data. Foi o reconciliador padrão desde o React 16.
\nSeus principais objetivos são:
\nrender().Você pode ler mais sobre a arquitetura do React Fiber aqui e aqui. Embora tenha sido fornecido com o React 16, os recursos assíncronos ainda não estão habilitados por padrão.
\nSeu código-fonte está localizado em packages/react-reconciler.
O React implementa uma camada sobre eventos nativos para suavizar as diferenças entre navegadores. Seu código fonte está localizado em packages/react-dom/src/events.
Leia a próxima seçãopara aprender sobre a implementação do reconciliador antes do React 16 em mais detalhes. Ainda não documentamos os componentes internos do novo reconciliador.
","frontmatter":{"title":"Codebase Overview","next":"implementation-notes.html","prev":"how-to-contribute.html"},"fields":{"path":"content/docs/codebase-overview.md","slug":"docs/codebase-overview.html"}}},"pageContext":{"slug":"docs/codebase-overview.html"}},"staticQueryHashes":[]}