网络技术问题 | React.js 测验 | 第一组 | 问题 4

简介

在这个网络技术问题中，我们将专注于 React.js 相关的知识。React.js 是一个流行的 JavaScript 库，用于构建用户界面。在这个测试中，我们将涵盖 React.js 的一些核心概念和常见问题。

问题 4

请根据以下代码片段，回答问题：

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  incrementCount() {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

export default App;

给定上述代码，回答以下问题：

1. 当组件初次加载时，会发生什么？
2. componentDidMount和componentDidUpdate的作用是什么？
3. incrementCount方法的功能是什么？
4. 上述代码中，什么触发了组件的更新？

答案

1. 当组件初次加载时，constructor方法将被调用，并初始化组件的状态（count: 0）。接着，componentDidMount方法将被调用，在该方法中，我们将document.title设置为当前计数的值。
2. componentDidMount和componentDidUpdate都是 React 组件生命周期中的方法。componentDidMount在组件初次渲染之后调用，componentDidUpdate在组件的状态或属性发生更改后调用。在上述代码中，这两个方法都用来更新页面标题，以反映当前的计数。
3. incrementCount方法的功能是增加计数器的值。它使用了 React 的setState方法来更新状态，使用了箭头函数来确保在更新状态时获取到正确的先前状态。
4. 组件的更新由状态的更改触发。在上述代码中，当按钮被点击时，incrementCount方法被调用，该方法会更新状态中count的值，导致组件更新并重新渲染界面。