Rendering Order In React - reactjs

Question

I am trying to understand the rendering order of Methods in React. I have a "persons" class and I iterate an array inside it calling a child component called "person".
My Persons.js in below
import React, { Component } from 'react';
import Person from './Person/Person';
class Persons extends Component{
constructor(props){
super(props);
console.log('[Persons.js] inside constructor',props);
}
componentWillMount(){
console.log('[Persons.js] inside componentWillMount()');
}
componentDidMount(){
console.log('[Persons.js] inside componentDidMount()');
}
render(){
console.log('[Persons.js] inside render())');
return(
this.props.persons.map((person,index)=>{
return(
<Person click={() => this.props.clicked(index)} name={person.name} age={person.age} change={ (event) => this.props.changed(event,index)} key={person.id}/>
);
})
);
}
}
export default Persons;
My Person.js is below
import React, { Component } from 'react';
import classes from './Person.css'
class Person extends Component{
constructor(props){
super(props);
console.log('[Person.js] inside constructor',props);
}
componentWillMount(){
console.log('[Person.js] inside componentWillMount()');
}
componentDidMount(){
console.log('[Person.js] inside componentDidMount()');
}
render(){
console.log('[Person.js] inside render()');
return(
<div className={classes.Person}>
<p onClick={this.props.click}>I'm {this.props.name} and {this.props.age} years old.</p>
<input type="text" onChange={this.props.change} value={this.props.name}/>
</div>
);
}
}
export default Person;
All I want to know is, why doesn't it invoke componentDidMount after render method of Person.js file? Instead, it invokes 4 times after finish iterating.
Here is the screenshot
Any idea?