Question

componentDidMount（）在安装组件（插入树中）后立即被调用。

如果我在componentDidMount中附加一个蓝色div，则首先会看到原始的react组件，然后看到蓝色div。但我直接看到蓝色的div甚至没有眨眼。

为什么？浏览器是不是太快了，我的眼睛太不灵敏了？

  .blue {
     position:absolute;
     top:0
     height:100px;
     width:100vw;
     background:blue
    }
***

classclass App extends Component {
  constructor(){
    super();
  }
  componentDidMount() {
    const div=document.createElement('div');
    div.className='blue';
    document.body.appendChild(div)
  }
  render(){  
   return (
     <div style={{background:'red'}}>hello world</div>
   )
  }
}

Answer 1

它正在按要求工作。它首先呈现红色，然后添加蓝色div。之所以发生这种情况，是因为不需要等待任何函数调用。此外，您正在执行的渲染非常轻巧，可以毫不费力地在最短的时间内执行。

您可以通过两种方式验证执行行为

检查dom树
使用调试器并在render()处停止执行。

例如 render() { debugger; return (<div></div>);}。它将停止执行，然后您可以使用浏览器调试功能逐步进行操作。

如果您使用的是Chrome，请导航至Sources标签并在所需文件上标记一个断点。

Answer 2

作为@Aseem Upadhyay良好调试的另一种方法，这里的另一种方法是避免直接操纵DOM并使用React的状态。

    class App extends React.Component {
      state = {
        style: {
          position: "absolute",
          top: "0",
          height: "100px",
          width: "100vw",
          background: "red",
        }
      }
      
      componentDidMount() {
        setTimeout(() => this.setState( prevState => ({
          style: {
            ...prevState.style, background: "blue"
          }
        })), 2000 );
        
      }
      render(){
        return (
          <div style={this.state.style}>hello world</div>
        )
      }
    }
    
    ReactDOM.render(
      <App />,
      document.getElementById("app")
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

如果您以React方式编写应用，则还可以使用React Developer Tools来检查DOM和状态更改。

Answer 3

这与您的眼睛无关。您放置在componentDidMount()内的任何逻辑都将在应用程序启动时立即执行。

这意味着如果我在类内部定义函数，则在constructor()下但在render()方法上。如果我定义了一个名为componentDidMount()的方法，则第一次将该组件呈现到屏幕上时，将自动调用此函数一次。

在调用componentDidMount()方法之后，我们的组件将停下来等待更新，该更新将以调用setState()方法的形式出现。每当我们调用setState()并更新状态时，组件都会重新呈现或更新自身。发生这种情况时，另一个名为componentDidUpdate()的组件将被自动调用。

要更好地理解这一点，请在组件内部尝试以下操作：

.blue {
     position:absolute;
     top:0
     height:100px;
     width:100vw;
     background:blue
    }
***

class App extends Component {
  constructor(props){
    super(props);
  }
  componentDidMount() {
    console.log('My component was rendered to the screen’);
  }
  render(){  
   return (
     <div style={{background:'red'}}>hello world</div>
   )
  }
}

只要您的组件出现在屏幕上，您都将立即看到记录在浏览器控制台中的字符串。

另外，您已经两次声明class关键字，您肯定会遇到一个错误，删除其中一个，最后但同样重要的是，请注意我如何将props传递给两个{{ 1}}方法和constructor()？

当我们定义super()方法时，它将自动与constructor()对象一起调用。一旦使用props，我们还必须添加constructor()。您还必须在此方面遇到错误，将其修复。

关于React componentDidMount

3 个答案: