面试题：React 服务端渲染中 React 生命周期函数 `componentDidMount` 的作用及使用场景

Question

在 React 服务端渲染（SSR）的环境下，请阐述 `componentDidMount` 生命周期函数的作用，并举例说明它在实际应用中有哪些常见的使用场景。

Answer 1

componentDidMount 在 React SSR 环境下的作用

在 React 服务端渲染（SSR）环境中，componentDidMount 仅在客户端执行。它在组件挂载到 DOM 后立即调用，此时可以进行依赖于 DOM 的操作，比如操作 DOM 元素、添加事件监听器等，同时也适合执行一些需要在组件渲染完成后才启动的副作用操作，如数据获取、第三方库初始化等。由于 SSR 是在服务端生成 HTML 并发送到客户端，componentDidMount 确保这些操作在客户端浏览器环境中安全执行，不会干扰服务端渲染过程。

常见使用场景举例

1. 数据获取：

   import React, { Component } from'react';
   
   class MyComponent extends Component {
     state = {
       data: []
     };
     componentDidMount() {
       fetch('https://example.com/api/data')
        .then(response => response.json())
        .then(data => this.setState({ data }));
     }
     render() {
       return (
         <div>
           {this.state.data.map(item => (
             <p key={item.id}>{item.name}</p>
           ))}
         </div>
       );
     }
   }
   export default MyComponent;
   

   在这个例子中，componentDidMount 被用于发起网络请求获取数据，因为在服务端渲染时可能无法直接发起这样的网络请求，在客户端挂载后执行则可确保数据获取在浏览器环境中正常进行。
2. 第三方库初始化： 例如初始化一个图表库 Chart.js。

   import React, { Component } from'react';
   import Chart from 'chart.js';
   
   class ChartComponent extends Component {
     componentDidMount() {
       const ctx = this.chartRef.getContext('2d');
       new Chart(ctx, {
         type: 'bar',
         data: {
           labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
           datasets: [{
             label: '# of Votes',
             data: [12, 19, 3, 5, 2, 3],
             backgroundColor: [
               'rgba(255, 99, 132, 0.2)',
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)',
               'rgba(75, 192, 192, 0.2)',
               'rgba(153, 102, 255, 0.2)',
               'rgba(255, 159, 64, 0.2)'
             ],
             borderColor: [
               'rgba(255, 99, 132, 1)',
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)',
               'rgba(75, 192, 192, 1)',
               'rgba(153, 102, 255, 1)',
               'rgba(255, 159, 64, 1)'
             ],
             borderWidth: 1
           }]
         },
         options: {
           scales: {
             yAxes: [{
               ticks: {
                 beginAtZero: true
               }
             }]
           }
         }
       });
     }
     render() {
       return <canvas ref={ref => this.chartRef = ref} />;
     }
   }
   export default ChartComponent;
   

   这里在 componentDidMount 中初始化 Chart.js，因为它依赖于 DOM 元素，需要在组件挂载到客户端 DOM 后才能进行初始化。
3. 添加事件监听器：

   import React, { Component } from'react';
   
   class WindowSizeComponent extends Component {
     state = {
       windowWidth: window.innerWidth
     };
     componentDidMount() {
       window.addEventListener('resize', this.handleResize);
     }
     componentWillUnmount() {
       window.removeEventListener('resize', this.handleResize);
     }
     handleResize = () => {
       this.setState({
         windowWidth: window.innerWidth
       });
     }
     render() {
       return (
         <div>
           <p>The window width is: {this.state.windowWidth}</p>
         </div>
       );
     }
   }
   export default WindowSizeComponent;
   

   在 componentDidMount 中添加了 resize 事件监听器，用于监听窗口大小变化并更新组件状态，这同样是依赖于浏览器环境的操作，适合在客户端挂载后执行。