Posso usar React.render () várias vezes no DOM?

107

Quero usar o React para adicionar componentes várias vezes em todo o DOM. Este violino mostra o que estou procurando fazer e não gera erros. Aqui está o código:

HTML:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

Eu vi essa pergunta e temo que, ao fazer o acima, estarei arriscando os componentes do React interferindo uns nos outros. A resposta a essa pergunta sugere o uso de renderização do lado do servidor, o que não é uma opção para mim, já que estou usando o Django do lado do servidor.

Por outro lado, talvez o que estou fazendo esteja OK porque tenho apenas uma instância da biblioteca React montada (em oposição a vários componentes chamando sua própria instância do React)?

Essa maneira de usar várias instâncias do DOM é uma maneira correta de usar o React?

reactjs YPCrumble
fonte

Respostas:

120

Sim, é perfeitamente normal ligar React.rendervárias vezes na mesma página. Como você sugeriu, a própria biblioteca React é carregada apenas uma vez, mas cada chamada para React.rendercriará uma nova instância de componente independente de quaisquer outras. (Na verdade, tal situação não é incomum em sites que estão em processo de transição para o React, onde algumas partes da página são geradas usando React.rendere outras não.)

tremonha
fonte

incrível - também é extremamente útil para "turbinar" um aplicativo Django existente. Desejo usar Django para o conteúdo renderizado para obter o SEO e usar React para interação do usuário com elementos DOM. Isso torna super simples de alcançar.

YPCrumble

você provavelmente também pode olhar para shouldComponentUpdate e ele pode inicializar o desempenho no futuro (provavelmente não no seu caso). Aqui está a referência: facebook.github.io/react/docs/component-specs.html

Jim

@YPCrumble se a resposta do funil estiver correta, marque-a

Dana Woodman

E quanto ao caso em que existem vários ReactDOM.render()que tem que inserir componentes na mesma divdependendo de qual página você abre? Em particular, você tem apenas um app.jsativo concatenado feio <script src="app.js">em cada página. E isso carrega libs, digamos, jQuery, Bootstrap, React e tem seu código JS customizado e componentes React. Se você visitar /foo, você tem ReactDOM.render(<Foo />, getElemById('content')). Se você visitar /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) `. Eles interferem. Como você administra isso?

Verde

@Green Não tenho certeza se entendi, se os componentes estiverem em páginas separadas, como eles interfeririam? Caso contrário, por que não adicionar um novo elemento de contêiner para cada componente, ou seja:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

tremonha

Essa abordagem é adequada do ponto de vista do desempenho do carregamento da página, mas existem outras desvantagens e várias raízes do React devem ser evitadas, se possível.

Raízes diferentes do React não podem compartilhar contexto, e se você precisar se comunicar entre as raízes do React, você precisará recorrer a eventos DOM globais
Você obtém menos benefícios com otimizações de desempenho como divisão de tempo - suspense e renderização assíncrona. Não é possível suspender além dos limites da raiz do React

Mais raeding - https://github.com/facebook/react/issues/12700

Yangshun Tay
fonte