如何在jQuery单页应用或静态HTML站点中强制重新渲染React组件

你可以根据你的迁移进度选择以下3种可行方案，都适配当前jQuery+React混编的场景：

方案1：暴露全局更新方法（最直接） #

直接在React组件内部把更新方法挂载到全局window对象上，jQuery路由切换代码直接调用即可：

1. 改造React组件代码：

import { useState, useEffect } from 'react';

const ProductDetail = () => {
  // 用于触发更新的状态标识
  const [updateCount, setUpdateCount] = useState(0);
  const [productData, setProductData] = useState(null);

  // 组件挂载时暴露全局更新方法
  useEffect(() => {
    window.updateProductDetail = () => setUpdateCount(prev => prev + 1);
    // 卸载时清除全局方法避免内存泄漏
    return () => delete window.updateProductDetail;
  }, []);

  // 依赖updateCount，每次触发更新都会重新拉取对应URL的产品数据
  useEffect(() => {
    const urlId = new URLSearchParams(window.location.search).get('id');
    if (!urlId) return;
    // 替换为你实际的产品数据请求逻辑
    fetch(`/api/products/${urlId}`)
      .then(res => res.json())
      .then(data => setProductData(data));
  }, [updateCount]);

  return <div>{/* 你的产品渲染逻辑 */}</div>
}

2. 修改原有jQuery路由切换逻辑，切页时调用该方法：

$(".main-content .page").removeClass("visible");
const page = $(`#${pageId}`);
page.addClass("visible");

// 切到产品详情页时触发组件更新
if (pageId === 'product-detail' && window.updateProductDetail) {
  window.updateProductDetail();
}

方案2：自定义事件监听（耦合度更低） #

通过全局自定义事件实现通信，后续新增需要响应路由变化的组件不需要修改路由代码：

1. React组件内监听自定义路由变化事件：

import { useEffect, useState } from 'react';

const ProductDetail = () => {
  const [productData, setProductData] = useState(null);

  useEffect(() => {
    const handleRouteChange = () => {
      const urlId = new URLSearchParams(window.location.search).get('id');
      if (!urlId) return;
      // 产品数据请求逻辑
      fetch(`/api/products/${urlId}`)
        .then(res => res.json())
        .then(data => setProductData(data));
    };
    // 监听路由变化事件
    window.addEventListener('spaRouteChange', handleRouteChange);
    return () => window.removeEventListener('spaRouteChange', handleRouteChange);
  }, []);

  return <div>{/* 产品渲染逻辑 */}</div>
}

2. jQuery路由切换时触发全局事件：

$(".main-content .page").removeClass("visible");
const page = $(`#${pageId}`);
page.addClass("visible");

// 触发全局路由变化事件
window.dispatchEvent(new CustomEvent('spaRouteChange'));

方案3：通过key属性强制重建组件（无需修改组件内部） #

如果你是通过ReactDOM.render单独把组件挂载到DOM节点上，可以直接通过修改key属性让React卸载重建组件，自动触发所有初始化逻辑：
修改组件挂载的代码，把URL的id作为key传入：

const productId = new URLSearchParams(window.location.search).get('id');
ReactDOM.render(
  <ProductDetail key={productId} />,
  document.getElementById('product-detail-root')
);

只要URL里的id变化，key就会变化，React会直接销毁旧组件渲染新组件，自动拉取对应数据。

内容的提问来源于stack exchange，提问作者Dhanraj Acharya