réagit - comment instancier un composant et quand sont-ils identiques?

J'ai quelques questions sur le code suivant. D'après ce que je comprends, Example est une classe, et il est d'abord instancié lorsqu'il est passé comme argument dans ReactDOM.render. Lorsqu'il a été rendu, il a d'abord appelé la méthode componentWillMount.réagit - comment instancier un composant et quand sont-ils identiques?

Ce que je ne comprends pas est le deuxième appel ReactDOM.render.

Est le <Example /> dans le deuxième ReactDom.render l'appel le même que le premier.

Je pensais que le second appel instanciait une deuxième instance de Example, mais apparemment, il ne l'a pas fait parce que la méthode componentWillMount n'a pas été appelée.

Pourquoi les deux <Example /> la même instance? Comment puis-je créer une seconde instance/séparée de <Example />?

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export class Example extends React.Component { 
    componentWillMount() { 
    alert('component is about to mount!'); 
    } 

    render() { 
    return <h1>Hello world</h1>; 
    } 
} 

ReactDOM.render(
    <Example />, 
    document.getElementById('app') 
); 

setTimeout(() => { 
    ReactDOM.render(
    <Example />, 
    document.getElementById('app') 
); 
}, 2000);

Source

2017-08-07 I-PING Ou

Habituellement, vous appelez seulement ReactDOM.render une fois, ceci est probablement un exemple pour montrer que vous pouvez appeler ReactDOM.render plusieurs fois pour écraser un composant monté existant – Axnyff

En outre, en tant que [documentation] (https://facebook.github.io/react/docs/react-dom .html) états: _Si l'élément React a été précédemment rendu dans un conteneur, il effectuera une mise à jour et ne fera que muter le DOM comme nécessaire pour refléter le dernier élément React._ –

Si vous voulez deux cas, alors vous devriez avoir deux principaux divs avec différents ID:

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export class Example extends React.Component { 
    componentWillMount() { 
    alert('component is about to mount!'); 
    } 

    render() { 
    return <h1>Hello world</h1>; 
    } 
} 

ReactDOM.render(
    <Example />, 
    document.getElementById('app') 
); 

ReactDOM.render(
    <Example />, 
    document.getElementById('appTwo') 
);

Et dans le code HTML:

<div id="app"></div> 
<div id="appTwo"></div>

Source

2017-08-07 15:02:04

réagit - comment instancier un composant et quand sont-ils identiques?

Répondre

Questions connexes