reactjs - 反応する。コンポーネントは状態変化の順序でレンダリングされません

Question

反応では、小道具名= A、B、Cの入力コンポーネントがあると仮定します。それらは順番にレンダリングされます

render() {
   return(
      <Input name="A" />
      <Input name="B" />
      <Input name="C" />
   );
}

次に、最初にC、次にAの順序でCとAの状態を変更します。 コンポーネントAとCは、最初に A、次にCの順序でレンダリングされます。それらは状態変化の順序でレンダリングされません（Cの次にA）

以下のコード スニペットを参照してください。私はアウトプットを次のように見つけました

Cの状態を設定

Bの状態を設定

Aの状態を設定

Aのレンダリング

Bのレンダリング

C のレンダリング

class Input extends React.Component {
  
  
	componentWillMount() {
			this.props.addInput(this);
	}
  
  state = {
  	error: false
   }
   
   check() {
   console.log("set state of", this.props.name)
    this.setState({
      error: true
    })
   }

  render() {
  	console.log("Render of", this.props.name)
    return (
      <input   />
    );
  }
}
class Hello extends React.Component {
  
  constructor(props) {
  super(props);
   this.inputs = {};
}

   addInput(component) {
      this.inputs[component.props.name] = component;
      console.log(this.inputs);
    }
   
   checkAll() {
   const inputs = this.inputs;
   Object.keys(inputs).reverse().forEach(name => {
     inputs[name].check()
    });
   }
 
  render() {
    return (
    	<div>
        <Input addInput={(c) => this.addInput(c)} name="A"/>
        <Input addInput={(c) => this.addInput(c)} name="B"/>
        <Input addInput={(c) => this.addInput(c)} name="C"/>
        <button onClick={() => this.checkAll()}>click here</button>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>