なぜこの子コンポーネントは再レンダリングされませんか？

Question

私はReactJSを試しています。子コンポーネントのレンダリングの仕組みを理解しようとしています。

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')); 

私は「再レンダリング」、それはあなたのメインのrenderメソッドを呼び出しますが、カウンタではない理由を私は理解していない：ReactJSで私はこのような例を、設定している場合？ MainとCounterはMainの子であるため、両方のレンダリングメソッドを呼び出す必要があるようです。

レンダリングが呼び出されたとき、「レンダリング」は印刷されますが、「レンダリングカウンタ」は印刷されません。

Answer 1

Reactを使用する主な利点、つまり国家の仕組みを見落としているようです。

1. あなたは、これまでつまり、あなたが動的状態を設定することはありませんリアクトコンポーネント
2. 内this.renderを呼び出す必要はありません：this.state = ...
3. あなたは常にあなたの状態を設定するためにthis.setStateを使用する必要があります。

リライトは、あなたのコードは以下のようになるはずです：

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> 
    ) 
    } 
} 

this.setStateを呼び出すことにより、自動的にそれはあなたのコンポーネントを再描画する必要が知っている、その結果、すべての子コンポーネントも再レンダリングされますリアクト。

希望すると便利です。

Answer 2

この場合、rerenderメソッドを使用する必要はなく、また、更新状態が必要なすべての子コンポーネントをメソッドsetStateで再レンダリングすることもできます。また、thisに応じて、 "状態を上に移動する"必要があります。

ここに私の例：あなたは再レンダリングを呼び出すためにthis.forceUpdate()を使用することができますいくつかの状況では

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

。 しかし、これを行うことができない場合、しないでください。