面试题：React中如何在生命周期方法里实现简单的数据缓存

适合进行数据缓存操作的生命周期方法

在React组件生命周期中，componentDidMount和componentDidUpdate比较适合进行数据缓存操作。

componentDidMount：组件挂载后调用，适合在首次渲染后发起API请求并缓存数据。
componentDidUpdate：组件更新后调用，可以在特定条件下（如props变化等），检查是否需要重新请求数据还是使用缓存。

示例代码

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      cache: {}
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.someProp !== this.props.someProp) {
      if (this.state.cache[this.props.someProp]) {
        this.setState({ data: this.state.cache[this.props.someProp] });
      } else {
        this.fetchData();
      }
    }
  }

  fetchData = () => {
    const apiUrl = `https://example.com/api?param=${this.props.someProp}`;
    fetch(apiUrl)
     .then(response => response.json())
     .then(data => {
        this.setState(prevState => ({
          data,
          cache: {
           ...prevState.cache,
            [this.props.someProp]: data
          }
        }));
      });
  }

  render() {
    return (
      <div>
        {this.state.data && <p>{JSON.stringify(this.state.data)}</p>}
      </div>
    );
  }
}

export default DataFetchingComponent;

上述代码中，componentDidMount在组件挂载后发起API请求。componentDidUpdate在props中的someProp变化时，先检查缓存中是否有对应数据，有则直接使用，没有则重新请求并更新缓存。fetchData方法负责实际的API请求，并在获取数据后更新状态及缓存。

星途面试题库

面试题：React中如何在生命周期方法里实现简单的数据缓存

知识考点

面试题答案

适合进行数据缓存操作的生命周期方法

示例代码