Reagir a prática nativa de SDR

1. Breve introdução do SDR

SDR (renderização orientada a servidor) renderização orientada a servidor, movendo a renderização personalizada de componentes para o back-end, o foco é criar componentes que possam ser completamente controlados e alterados a partir do back-end, pode ajudar bastante a empresa a resolver os seguintes problemas:

1. Micro front-end
2. Público-alvo com designs diferentes
3. Teste A / B para aplicativos móveis direcionados
4. Controle de versão de componentes para diferentes versões de aplicativos
5. Edite componentes na produção após o lançamento (atualização dinâmica, codepush, webview)
6. Corrigidos alguns erros, mas não publicavam a nova versão do aplicativo na loja de aplicativos (atualização dinâmica, codepush, webview)

Ao contrário do Codepush, o CodePush possui uma ampla variedade de funções.A configuração remota é usada principalmente para o valor original e pode resolver o problema de que a exibição não pode ser sincronizada no tempo devido ao progresso mais quente. Ao mesmo tempo, a implementação do SDR também enfrentará os seguintes problemas:

1. Atualize com segurança nossas definições de componentes, mantendo a compatibilidade com versões anteriores.
2. Compartilhe a definição de tipo de nossos componentes entre plataformas.
3. Responda a eventos em tempo de execução, como clicar em um botão ou na entrada do usuário.
4. Renderizando componentes totalmente personalizados sem implementações existentes no momento da construção. (Experimente o formato Lona)
5. O tempo necessário para analisar o processo de geração de componentes

As vantagens e os problemas trazidos pelo SDR podem atender basicamente à nossa construção relativamente leve de componentes de página no desenvolvimento diário. Como construir um contêiner SDR para facilitar o uso, estender e garantir segurança e robustez se torna extremamente importante.
 

Segundo, análise de construção SDR

Antes de construir um contêiner SDR no RN, vamos analisar como os componentes no RN são compostos. Vamos primeiro ver um exemplo simples

<View style={{ width: 100 }}>
    <Text style={{ fontSize: 10 }}>
        sdr
    </Text>
</View>

No código, o componente View básico é definido, o componente Text é definido no componente View e a propriedade style é definida separadamente. Portanto, os componentes básicos contêm aproximadamente os seguintes atributos:

1. Nome e tipo do componente

2. Propriedades do componente (adereços, adereços personalizados, etc.)

3. Filhos do componente

 Portanto, a premissa de construir o SDR é que precisamos definir um conjunto de "regras" para restringir como o front end cria componentes, atributos e subcomponentes. Portanto, o protocolo para o qual os componentes acima são mapeados pode ser definido aproximadamente da seguinte maneira: 

{
    type: 'View',
    props: {
        style: {
            width: 100,
        }
	},
	children: [
		{
		    type: 'Text',
		    props: {
		        style: {
		            fontSize: 10,
		        }
			},
			children: 'sdr'
		}

	]
}

Como você pode ver, definimos o componente como tipo, a propriedade como adereços e o componente filho como filhos. Como o mapeamento de tipos, precisamos solicitar que seja definido, por exemplo, o tipo: 'View', correspondente ao componente View no RN, portanto, o protocolo de tipo sdr é o seguinte:

sdrTypes: {
	Text: Text,
	View: View,
	Image: Image,
	Button: TouchableOpacity,
},

Depois que as regras são definidas, o próximo passo é percorrer e analisar os adereços e os filhos.Durante o processo de análise, porque os componentes estão aninhados, você precisa usar um algoritmo recursivo para concluir gradualmente a análise do tipo, adereços, filhos e, finalmente, chamar React O método .createElement pode concluir a criação do componente.

 

3. Controle dinâmico de atributos

Na declaração do protocolo, os atributos são basicamente definidos: se o valor de um atributo precisar ser controlado pelo front end, ele deverá ser definido com um espaço reservado.O front end usará o valor para corresponder ao espaço reservado e substituí-lo. Portanto, podemos definir as seguintes regras para adereços, texto e função:

estrutura prop :: props
definida pelo front end text :: estrutura de valor
definida pela função front end :: estrutura do método definida pelo front end

O texto acima parece mais abstrato. Simplesmente, é definir um prefixo de marcador de posição, marcar o tipo atual e concatenar valores numéricos específicos posteriormente. As regras de renderização são as seguintes:

{
    type: 'Text',
    props: {
        style: {
            fontSize: 10,
        }
	},
	children: '${text::userInfo.userName}'
}

 Como você pode ver, os filhos do componente Text são definidos como "$ {text :: userInfo.userName}" e, no processo de análise dos filhos, corresponderá se contém "text ::"; se sim, obterá a definição de front-end Estrutura de dados e obtenha o valor final para substituir; portanto, o front end precisa definir a estrutura dos dados:

userInfo={{
	userName: 'sdr',
}}

Dessa forma, no processo de análise, o valor de userName em userInfo será obtido e os filhos serão substituídos e, finalmente, os filhos: 'sdr'. Da mesma forma, a definição de adereços e função é a mesma.

Quatro, use

1. Declaração de configuração

const ClientConfig = {
  sdrTypes: {
    Text: Text,
    View: View,
    Image: Image,
    Button: TouchableOpacity,
  },
  loading: false,
  error: false,
  renderError: () => {},
  renderLoading: () => {},
};

(1) sdrTypes declara a relação de mapeamento entre modelos e componentes sdr

(2) carregamento, erro, renderError, renderLoading declaram o carregamento, o status da falha e a exibição correspondente da exibição

2. O provedor fornece configuração básica, SDRView como um componente de renderização, e gera uma árvore de componentes correspondente com base no modelo sdr fornecido.Os dados de espaço reservado envolvidos no modelo precisam ser passados ​​como acessórios no SDRClient

<Provider config={ClientConfig}>
  <SDRView
    sdrTemplate={sdrTemplate}
    test={testData}
    item={{
      info: {
        buttonName: 'btn',
      },
    }}
  />
</Provider>

3. O modelo sdrTemplate pode ser puxado do lado do servidor e definido como SDRView

V. Resumo 

De uma visão geral do princípio a uma prática simples, o método de renderização usando SDR no React Native é basicamente realizado.Os problemas atuais são os seguintes:

Oferece suporte à análise de vários estilos, por exemplo, o modelo de back-end define o estilo padrão e mescla-se ao front-end

O código-fonte pode consultar  https://github.com/songxiaoliang/rn-sdr