在 React 应用中，有效地展示 XHR（XMLHttpRequest）和 Fetch 请求的响应进度对于提供良好的用户体验至关重要。以下将详细介绍实现这一目标的方法。

对于 XHR 请求，我们可以利用其提供的事件来跟踪进度。通过监听 onprogress 事件，能够实时获取请求的加载进度信息。在代码实现中，创建一个 XHR 对象，并设置相应的事件处理函数。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data');

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    // 更新 UI 以显示进度百分比
  }
};

xhr.send();

接下来看 Fetch API。虽然 Fetch 本身没有像 XHR 那样内置的进度事件，但我们可以通过创建一个 ReadableStream 来模拟实现进度跟踪。

const controller = new AbortController();
const signal = controller.signal;

fetch('https://example.com/data', { signal })
 .then(response => {
    const reader = response.body.getReader();

    let receivedLength = 0;
    const contentLength = response.headers.get('Content-Length');

    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }

      receivedLength += value.length;
      const percentComplete = (receivedLength / contentLength) * 100;
      // 更新 UI 以显示进度百分比
    }
  })
 .catch(error => {
    // 处理错误
  });

在实际应用中，无论是使用 XHR 还是 Fetch，将获取到的进度信息实时反馈给用户都需要结合 React 的状态管理机制。可以通过 useState 钩子来更新进度状态，并在组件的渲染中展示进度条或进度百分比。

为了提供更直观和友好的用户体验，还可以在进度更新时添加适当的提示信息，如“正在加载...”等。要处理好请求失败或异常的情况，给用户清晰的错误提示。

掌握在 React 中展示 XHR 和 Fetch 请求响应进度的方法，能够让应用更加流畅和用户友好，提升整体的使用体验。通过合理运用相关技术和良好的状态管理，能够实现精准和有效的进度展示，满足用户对于应用性能感知的需求。