Javascript react componentDidMount在呈现后被调用

我不熟悉React JS，现在我对组件生命周期方法的工作方式感到困惑；这与我的案例中的ReactJS.org文档完全矛盾。componentDidMount（）应该在render（）之前执行，这是预期的行为，但render（）在componentDidMount（）之前执行

我的源代码：

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;

如果在

componentDidMount（）

中调用了

this.importAll（）

，则类变量this.cache为

null

，但如果在

render（）

中调用了

this.importAll（）

，则它会占用值

---

这是正确的行为，在渲染后调用componentDidMount（）

当 正在创建零部件的实例并将其插入到中 DOM：
*构造函数（）
*静态getDerivedStateFromProps（）
*render（）
*组件安装（）

之前已调用不推荐使用的组件willmount（）

注: 这些方法被认为是遗留的，您应该避免 在新的代码中：

不安全的_组件willmount（）

---

您误解了react js中的生命周期

---

第一次调用

render

后，将调用

componentDidMount

---

有关更多信息：

我认为您将

componentWillMount（）

与

componentDidMount（）

混淆了<在渲染之前调用code>componentWillMount（），而在

componentDidMount（）

中调用

setState（）

可以在第一次

render（）

调用之后重新渲染组件。您可以参考该图来更好地理解生命周期是如何运行的，请仔细考虑一下。泰然自若。这意味着它已经挂载，这意味着必须运行渲染函数才能挂载它（您已经可以在浏览器中看到它）。因此，是的，它应该在渲染之后，但仅在装载渲染上。不在随后的重新渲染之后欢迎使用堆栈溢出！你的答案最好写在原始问题下作为评论。我想那里可能已经有类似的东西了。答案保留为对用户问题的完整解释。尽管如此，还是做得很好！

//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;