React 中 componentDidMount 方法的作用是什么？

推荐答案

componentDidMount 是 React 组件生命周期中的一个方法，它在组件首次挂载（即插入到 DOM 树中）后立即调用。这个方法通常用于执行一些需要在组件渲染完成后进行的操作，比如发起网络请求、设置定时器、订阅事件等。

本题详细解读

1. 什么是 componentDidMount？

componentDidMount 是 React 类组件生命周期方法之一，属于“挂载阶段”的一部分。它在组件首次渲染到 DOM 后立即执行。这个方法只会被调用一次，通常用于执行一些需要在 DOM 加载完成后才能进行的操作。

2. 使用场景

• 数据获取：在 componentDidMount 中发起网络请求，获取数据并更新组件的状态。
• DOM 操作：如果需要直接操作 DOM 元素，可以在 componentDidMount 中进行。
• 订阅事件：在 componentDidMount 中订阅事件或设置定时器，并在 componentWillUnmount 中取消订阅或清除定时器，以避免内存泄漏。

3. 代码示例

// www.javascriptcn.com code example
class MyComponent extends React.Component {
  componentDidMount() {
    // 发起网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));

    // 设置定时器
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    // 清除定时器
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      time: new Date().toLocaleTimeString()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.time}.</h2>
      </div>
    );
  }
}

4. 注意事项

• 避免副作用：在 componentDidMount 中尽量避免直接修改组件的状态，除非是必要的副作用操作（如数据获取）。
• 性能优化：如果需要在 componentDidMount 中执行大量计算或操作，考虑使用 shouldComponentUpdate 或 React.memo 来优化性能。

5. 替代方案

在函数组件中，componentDidMount 的功能可以通过 useEffect 钩子来实现：

// www.javascriptcn.com code example
import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 发起网络请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // 设置定时器
    const timerID = setInterval(() => {
      console.log('Tick');
    }, 1000);

    // 清除定时器
    return () => clearInterval(timerID);
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>Data: {data}</h2>
    </div>
  );
}

通过 useEffect，可以在函数组件中实现类似 componentDidMount 的功能。