react componentDidMount est appelé exécution après le rendu

Je suis nouveau dans React JS et je suis maintenant perplexe quant au fonctionnement des méthodes de cycle de vie des composants; ce qui est entièrement en contradiction avec les documents ReactJS.org dans mon cas. Le componentDidMount () doit s'exécuter avant render () est ce que le comportement attendu, mais render () s'exécute avant componentDidMount ().

Mon code source:

//GalleryImages.js
const galleries = [
  {
    src: './Farmer2.jpg',
    title: 'Farmer2',
    description: 'farmer2'
  },
  {
    src: './Farmer1.jpg',
    title: 'Farmer1',
    description: 'farmer1'
  },
  {
    src: './Farmer3.jpg',
    title: 'Farmer3',
    description: 'farmer3'
  }
];
export default galleries;

import React from 'react';
import '../main.css';
//import sam from "../images/gallery/Farmer1.jpg";
import galleries from './GalleryImages.js';
class Gallery extends React.Component {
  constructor(props) {
    super(props);
  }
  cache = {};
  dummy = './Farmer1.jpg';
  importAll = (r, ping) => {
    console.log(ping + ' called');
    r.keys().forEach(key => {
      this.cache[key] = r(key);
      console.log(`key is ${key} and value : ${r(key)}`);
      this.dummy = r(key);
    });
    console.log(this.cache);
  };
  componentDidMount() {
    this.importAll(
      require.context('../images/gallery/', false, /\.jpg$/),
      'mount'
    );
  }
  render() {
    //this.importAll(require.context('../images/gallery/', false, /\.jpg$/),"render");
    console.log(this.cache);
    const gallery = galleries.map(gallery => {
      return (
        <a
          className="spotlight"
          href={gallery.src}
          data-title={gallery.title}
          data-description={gallery.description}
        >
          {console.log(this.cache[gallery.src])}
          <img src={this.cache[gallery.src]} />
        </a>
      );
    });
    return (
      <div className="container margintop150">
        <div className="greentext center">
          <h4>
            {' '}
            <b>Gallery</b>
          </h4>
        </div>
        <h5 className="type_5" />
        <div className="row">
          <div
            className="spotlight-group"
            data-title="Untitled"
            data-animation="fade"
            data-fullscreen="false"
            data-maximize="false"
            data-minimize="false"
          >
            {gallery}
          </div>
        </div>
      </div>
    );
  }
}
export default Gallery;