O objetivo e o significado da Web do React são muito claros: deixe o código nativo reagir executado na Web e deixe um conjunto de código executado em vários terminais móveis. Para o front-end e os negócios, essa é uma melhoria qualitativa na eficiência do desenvolvimento. Nos estágios iniciais do projeto, também consultamos a equipe do React com perguntas semelhantes. O colega principal de sua equipe @vjeux também achou que isso era uma coisa muito legal e o que eles queriam fazer no futuro. Talvez quando o React Native for Android, o React Web possa ser lançado. (Sim)
Arquitetura técnica
Existem várias soluções de adaptação baseadas no React Native:
1. Desenvolva um padrão de ponte e RN e RW implementem esse conjunto de padrões da maneira ideal.
Por exemplo, com base no layout flexível, implementamos um conjunto consistente de componentes flexíveis, <Flex>, <cell>, etc.
2. Alinhar completamente com o RN, o RW implementa todas as APIs que o RN pode implementar.
Na discussão, o último foi finalmente escolhido.
Devido ao conceito de Web React, deixe o código nativo reagir executado no lado da web, ele determina que o RW é apenas uma ferramenta de construção e embalagem, separada do RN, e a implementação do RW não é de muito significado. Em seguida, a direção técnica geral é muito clara: implementar o estilo, componente e API consistente do RN e, finalmente, compilá -lo em uma versão da Web através da ferramenta de construção.
Exemplo
Vamos dar uma olhada no processo de criação do React Web Project:
Etapa 1: Instale a Web React e execute a configuração relacionada
Esta etapa é principalmente para instalar pacotes React-Web e dependências relacionadas e configurar scripts de embalagem do WebPack.
Para simplificar esta etapa, desenvolvemos a ferramenta de linha de comando react-web-cli, que requer apenas a execução de duas linhas de comando. Ao mesmo tempo, a ferramenta de linha de comando também suporta iniciar o servidor de depuração, embalagens e outras funções, que serão introduzidas posteriormente.
Instale as ferramentas da CLI:
NPM Install React-Web-Cli -g
Instale e configure a Web React, etc.:
react-web init <diretório de projeto atual>
Após a conclusão da execução, as bibliotecas relacionadas à instalação do NPM serão criadas no diretório do seu projeto, e o arquivo web/webpack.config.js será criado automaticamente, com uma configuração por escrito. Neste momento, a estrutura do diretório é:
.├── readme.md├── Android/├── Index.android.js├ulto Index.ios.js├sto
Etapa 2: adicione o arquivo de entrada e faça configurações relevantes
Cada projeto precisa ter um arquivo de entrada, que geralmente é usado para introduzir e chamar outros componentes e inicializar o projeto, como index.ios.js, representa o arquivo de entrada do projeto na plataforma iOS. Para cumprir a especificação de nomeação de arquivos nativos do React, criamos um índice.web.js como o arquivo de entrada e precisamos especificar que o arquivo é o arquivo de entrada no webpack. Abra o arquivo web/webpack.config.js e modifique a variável de configuração:
var config = {caminhos: {src: path.join (root_path, '.Em seguida, criamos o arquivo index.web.js. Esse arquivo é realmente muito semelhante ao index.ios.js, mas é um pouco diferente. A principal diferença é que o iOS precisa apenas do appReGistry.RegisterComponent ('Awes', () => Awes); Para permitir que o código nativo do Xcode receba e processe seu código JS, enquanto o lado da Web precisa ser inserido no nó DOM antes que ele possa ser usado. Portanto, precisamos adicionar o seguinte código na parte inferior do index.web.js:
AppRegistry.ReGisterComponent ('Awes', () => Awes); if (plataform.os == 'web') {var app = document.createElement ('div'); document.body.appendChild (app); AppRegistry.RunApplication ('Awes', {Roottag: App});}Em seguida, o componente da plataforma precisa ser introduzido na seção superior. Dessa forma, a parte de configuração foi processada. Execute o comando react-web start para iniciar o servidor de depuração!
Você pode modificá -lo à vontade, é quase o mesmo que a experiência no simulador nativo do React.
Etapa 3: Teste e empacote o código da versão da web
Quando você terminar de modificar, desenvolver e testar o lado da Web, você pode embalar e publicá -lo. Os comandos embalados pela ferramenta React-Web-CLI são:
Pacote React-Web
Após a embalagem, o arquivo será armazenado no Web/ Saída/ Diretório. Você pode abrir diretamente o index.html (se o aplicativo solicitar operações, precisará verificar no servidor local) e, em seguida, poderá publicá -lo após a verificação.
O que aconteceu durante esse processo?
Os alunos curiosos podem ter algumas perguntas quando vêem isso. O que alguns comandos da ferramenta de linha de comando acima fez? Por que o React Web Package reage o código nativo em uma cópia do código usado no lado da web? O React Web é seguro e confiável? Quais são as coisas dentro?
Aqui, apresentarei brevemente os princípios de implementação do React Web e o que as etapas realmente fizeram.
Reactar os implementos da web reagem componentes nativos no lado da web
O React separa o código do ambiente da plataforma, adicionando uma camada, para que os desenvolvedores possam fazer algum processamento no nível do ambiente da plataforma, para que o mesmo código possa se adaptar a mais ambientes de plataforma, etc.
Por exemplo, o React-Canvas grava código de acordo com a sintaxe do React, faz algum processamento no nível do ambiente da plataforma (executa o código do React e o renderiza com o Canvas) e, em seguida, atinge metas específicas (melhorando o desempenho no lado móvel).
No React Native, o mesmo é verdadeiro para que um código de código seja executado no iOS e Android ao mesmo tempo. A equipe nativa do React fez algum processamento no aplicativo nativo da plataforma correspondente para permitir a análise do código que executa a sintaxe do React.
Existem também aplicações isomórficas. O servidor usa o React + Node.js para gerar HTML e o cliente usa o React para obter interações e funções relacionadas ao cliente. O mesmo é verdadeiro.
Para esse fim, a versão React V0.14.x começou com duas bibliotecas, React e React-Dom, que na verdade retirou o tratamento especial da plataforma do navegador e a transformou apenas na biblioteca React-Dom.
A coisa especial sobre o React Native é que a implementação de nível mais baixo do componente é a implementação do nativo, para que ele não suporta tags como Span e Div. Animação, etc., também ligue diretamente para a renderização de interface para a interface. Portanto, o lado da Web não é suportado, mas a maioria dos componentes pode ser simulada e implementada usando a tecnologia da Web. A animação pode ser usada no CSS3, os elementos básicos podem ser simulados com os mesmos problemas de tag HTML, layout e compatibilidade podem ser tratados no CSS; portanto, a Web do React precisa apenas reimplementar os componentes nativos do React usando a tecnologia da Web e, com a ajuda do React, essa camada, uma parte do código pode ser implementada em várias plataformas.
Para dar um exemplo muito simples, o componente de texto:
A implementação do React Native chama muitas das implementações de código subjacentes do React Native.
Para o lado da web, basta usar a tag <pan> para produzir uma linha de texto, para que a implementação do React Web cria diretamente uma tag <span> e não há problema em vincular alguns eventos ou algo assim.
Você pode usar componentes nativos do React que podem ser executados na demonstração do UI Explorer com confiança.
Webpack ajuda você a trocar os alvos de embalagem
Tendo feito um componente compatível com o lado da web, não precisaríamos substituir todas as necessárias ('React-native') nos componentes a serem embalados com requisitos ('react-web')? Caso contrário, como posso usar meus componentes da web para empacotá -lo?
O poderoso webpack vem com itens de configuração de alias para ajudá -lo a resolver esse problema:
Resolva: {Alias: {'React-native': 'React-Web', 'Reactnativeart': 'React-Art',}, extensões: ['', '.js', '.jsx'],},Dessa forma, ao embalagem, todos os lugares onde exigem ('react-native') são substituídos pelo pacote React-Web, e o módulo do react-web.Exports são consistentes com o React-nativo, para que o código possa funcionar sem substituição.
Além disso, outro método de introdução pode ser implementado com o plug-in, veja abaixo.
Introduzir componentes através do método de pressa para melhorar o desempenho
O WebPack e outras ferramentas de embalagem que suportam as especificações do CommonJS empacotarão todos os componentes do requisito no arquivo. Para o React Native, o tamanho do código é irrelevante, mas para a Web móvel, é um pouco mais importante. Especialmente se o seu projeto precisar apenas de componentes de texto, mas é triste porque o requer ('react-web') resultará na embalagem de todos os componentes.
Com base no plug -in do Webpack, há outra maneira de introduzir componentes para resolver esse problema, você pode chamá -lo de maneira pressa. Este método requer o carregamento do plug-in Webpack Haste-Riolver-Webpack-Plugin. A configuração padrão do WebPack foi carregada para você. Você pode usá -lo diretamente no componente da seguinte forma:
Var text = requer ('reactText');Em vez do que era antes:
var {text} = requer ('react-nativo');Dessa forma, quando o WebPack é embalado, o primeiro empacotará apenas o conteúdo desse componente, que pode reduzir o tamanho e melhorar o desempenho. Como isso é alcançado?
Quando o webpack do plug-in é carregado, todos os componentes serão digitalizados primeiro e as informações do @ProvidsModule no cabeçalho do componente (como as informações do componente de texto) e, em seguida, quando o nome do componente for necessário em outros arquivos, o arquivo será localizado automaticamente para embalagem. Ao mesmo tempo, você também pode distinguir entre plataformas. Mesmo que seja o mesmo nome, a plataforma será diferenciada ao embalar os arquivos correspondentes (os arquivos são determinados de acordo com as regras de nomeação do index.xxx.js).