Warum wird diese untergeordnete Komponente nicht neu gerendert?

Question

Ich experimentiere mit ReactJS und versuche zu verstehen, wie das Rendern von Child-Komponenten ausgelöst wird. In ReactJS, setze, wenn ich ein Beispiel, wie dies oben:

var externalCounterVar = 10 
class Counter extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = props; 
    } 
    render() { 
    console.log('rendering counter') 
    return (
     <div> {externalCounterVar} </div> 
    ) 
    } 
} 

class Main extends React.Component { 
    constructor(props){ 
    super(props); 
    } 
    handleClick() { 
    externalCounterVar += 1; 
    } 
    rerender(){ 
    this.render(); 
    } 
    render() { 
    console.log('rendering'); 
    return (
     <div> 
     <button onClick={this.rerender.bind(this)} /> 
     <Counter counter={externalCounterVar} /> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<Main />, document.getElementById('root')); 

Ich bin nicht sicher, ich verstehe, warum, wenn Sie „rerender“ es die Render Methode des Hauptes ruft aber nicht im Widerspruch? Es scheint, als müsste es beide Rendermethoden aufrufen, da Main und Counter ein Kind von Main sind.

Wenn also rerender aufgerufen wird, wird 'rendering' gedruckt, aber 'rendering counter' nicht.

Answer 1

Es sieht so aus als ob Sie einen der Hauptvorteile von React übersehen, nämlich wie der Zustand funktioniert.

1. Sie nie brauchen immer this.render innerhalb einer Komponente reagieren
2. Sie nie den Status dynamisch gesetzt sollte anrufen, das heißt: this.state = ...
3. Sie immer this.setState Ihren Zustand zu setzen verwenden sollten.

Rewritten, sollte Ihr Code etwa wie folgt aussehen:

const externalCounterVar = 10 
class Counter extends React.Component { 
    render() { 
    console.log('rendering counter') 
    return (
     <div> {this.props.counter} </div> 
    ) 
    } 
} 

class Main extends React.Component { 
    state = { 
    counter: externalCounterVar 
    } 
    handleClick() { 
    this.setState({counter: this.state.counter + 1}); 
    } 
    render() { 
    console.log('rendering'); 
    return (
     <div> 
     <button onClick={this.handleClick.bind(this)} /> 
     <Counter counter={this.state.counter} /> 
     </div> 
    ) 
    } 
} 

Durch this.setState Aufruf, Reaktion automatisch weiß, dass es Ihre Komponente rerender braucht, und als Ergebnis werden alle untergeordneten Komponenten auch erneut gerendert werden .

Hoffe, das hilft!

Answer 2

In diesem Fall müssen Sie nicht rerender Methode verwenden, auch mit dem Zweck, alle untergeordneten Komponenten neu zu rendern, müssen Sie Update-Status mit Methode setState. Und auch entsprechend this muss man "State up" bewegen.

Hier mein Beispiel:

class Counter extends React.Component { 
 
    render() { 
 
     console.log('rendering counter'); 
 
     return (<div> {this.props.counter} </div>); 
 
    } 
 
} 
 
class Main extends React.Component { 
 
    constructor(props){ 
 
     super(props); 
 
     this.state = {counter: props.counter}; 
 
     this.handleClick = this.handleClick.bind(this); 
 
    } 
 
    handleClick() { 
 
     this.setState(prevState => ({counter: ++prevState.counter})); 
 
    } 
 
    render() { 
 
     console.log('rendering'); 
 
     return (
 
      <div> 
 
       <button onClick={this.handleClick} /> 
 
       <Counter counter={this.state.counter} /> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 
var externalCounterVar = 10; 
 
ReactDOM.render(
 
    <Main counter={externalCounterVar} />, 
 
    document.getElementById('root') 
 
);

Answer 3

In einigen Situationen Sie this.forceUpdate() können neu rendern nennen. Aber, wenn Sie dies nicht tun können, tun Sie es nicht. https://facebook.github.io/react/docs/react-component.html#forceupdate