如何更新FunctionComponentElement的props？解决只读props无法修改问题

我有一个包含遗留业务逻辑的TS文件：

import { createElement, StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

let counter = 0;
const app = createElement(App, { counter });
root.render(createElement(StrictMode, null, [app]));
setInterval(() => {
  ++counter;
  app.props = { counter }; // 此处无效，因为React元素的props是冻结只读的
}, 1000);

还有一个纯展示用的TSX组件：

import * as React from 'react';

export default function App({ counter }) {
  return (
    <div>
      <p>Value: {counter}</p>
    </div>
  );
}

问题核心：直接修改app.props行不通，因为React创建的元素对象的props是冻结且只读的，没法直接修改。需要在保留遗留业务逻辑（即counter的更新逻辑）的前提下，让React组件能获取到最新的counter值。

解决方案1：每次状态更新时重新渲染组件 #

React的渲染逻辑是靠状态变化触发更新的，对于外部遗留逻辑维护的状态，我们可以在状态更新后重新创建App元素并调用root.render()，这样组件就能拿到最新的props。

修改后的TS文件代码：

import { createElement, StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

let counter = 0;

// 把渲染逻辑封装成函数
function renderApp() {
  const app = createElement(App, { counter });
  root.render(createElement(StrictMode, null, [app]));
}

// 先做初始渲染
renderApp();

setInterval(() => {
  ++counter;
  // 每次counter更新后重新调用渲染
  renderApp();
}, 1000);

为什么这能行？ #

• React元素是不可变对象，一旦创建就没法修改它的props或children，所以直接改app.props完全没用，必须创建新的元素。
• 调用root.render()时，React会自动对比新旧元素的差异，只更新需要变化的部分，不会把整个组件重新挂载一遍，性能开销很小。

解决方案2：用订阅模式解耦遗留逻辑和React渲染 #

如果你的遗留业务逻辑比较复杂，不想直接在更新代码里调用React的渲染函数，可以用订阅模式把状态变化和视图更新拆分开，让两边互不依赖。

代码示例：

import { createElement, StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 状态管理+订阅机制
let counter = 0;
const subscribers: (() => void)[] = [];

// 订阅状态变化的函数
function subscribe(callback: () => void) {
  subscribers.push(callback);
  // 返回取消订阅的方法，方便后续清理
  return () => {
    const index = subscribers.indexOf(callback);
    if (index !== -1) subscribers.splice(index, 1);
  };
}

// 遗留逻辑里调用这个方法更新状态
function updateCounter() {
  ++counter;
  // 通知所有订阅者状态变了
  subscribers.forEach(callback => callback());
}

// 让React渲染逻辑订阅状态变化
subscribe(() => {
  const app = createElement(App, { counter });
  root.render(createElement(StrictMode, null, [app]));
});

// 初始渲染
const initialApp = createElement(App, { counter });
root.render(createElement(StrictMode, null, [initialApp]));

// 原来的遗留业务逻辑
setInterval(updateCounter, 1000);

这个方案的好处是：遗留逻辑不需要知道React的存在，只负责维护状态并通知订阅者；React这边只负责监听状态变化并更新视图，实现了关注点分离，后续修改任意一边的逻辑都不会影响另一边。

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