React中ref对象内部状态变更时，如何触发组件重渲染？

你的核心问题是：Tree组件内部维护的activeNode状态，通过ref访问并调用setActiveNode时，不会触发组件重渲染——因为ref的变更不属于React的状态更新机制，无法驱动视图刷新。以下是几种不将状态移到父组件、仅通过ref访问Tree内部状态的触发重渲染方案：

方案一：让Tree组件暴露状态变更回调 #

在Tree组件内部监听activeNode的变化，通过props回调通知外部，外部用一个空状态触发重渲染：

1. 修改Tree组件，添加状态变更回调：

// Tree组件内部
import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';

const Tree = forwardRef((props, ref) => {
  const [activeNode, setActiveNode] = useState<NodeModel<TreeNodeData<C>> | null>(null);

  // 当activeNode变化时调用外部回调
  useEffect(() => {
    props.onActiveNodeChange?.(activeNode);
  }, [activeNode, props.onActiveNodeChange]);

  useImperativeHandle(ref, () => ({
    activeNode,
    setActiveNode
    // 其他需要暴露的方法...
  }));

  // Tree组件其余渲染逻辑...
});

2. 在EditTreeContainer中使用回调触发重渲染：

export function EditTreeContainer<
  T extends TreeTarget<C>,
  C extends TreeContent,
>({
  queryTarget,
  Tree,
  mutations,
}: {
  queryTarget: UseQueryResult<T>;
  Tree: any;
  mutations: {
    article: UseMutationResult<C, Error, any>;
  };
}) {
  const treeRef = useRef<TreeRef<C, TreeNodeData<C>>>(null);
  // 用空对象作为触发重渲染的状态载体
  const [_, setForceUpdate] = useState({});

  const handleActiveNodeChange = () => {
    // 更新状态触发组件重渲染
    setForceUpdate({});
  };

  return (
    <div className='flex gap-4 pt-10'>
      <div className='flex h-fit w-full gap-10 rounded-md'>
        <Tree
          ref={treeRef}
          queryTarget={queryTarget}
          draggable={true}
          editable={true}
          mutate={true}
          onActiveNodeChange={handleActiveNodeChange} // 绑定状态变更回调
          className='w-[400px]'
        />
        <div className='max-w-[800px] flex-1'>
          {/* 直接通过ref访问Tree内部的activeNode */}
          {treeRef.current?.activeNode && (
            <DefaultTreeContentBox
              content={treeRef.current.activeNode.data.content}
              options={{
                edit: {
                  enabled: true,
                  mutations: mutations,
                },
              }}
              treeRef={treeRef} // 传入ref供内部调用setActiveNode
            />
          )}
        </div>
      </div>
    </div>
  );
}

方案二：在DefaultTreeContentBox内部同步状态 #

如果无法修改Tree组件的props，可以在DefaultTreeContentBox内部，通过useEffect监听ref中activeNode的变化，同步到本地状态触发重渲染：

// DefaultTreeContentBox组件内部
import { useState, useEffect } from 'react';

export function DefaultTreeContentBox({ content, options, treeRef }) {
  // 用本地状态同步Tree的activeNode
  const [localActiveNode, setLocalActiveNode] = useState(treeRef.current?.activeNode);

  useEffect(() => {
    // 定期检查activeNode变化（适合无法修改Tree组件的场景）
    const interval = setInterval(() => {
      if (treeRef.current?.activeNode !== localActiveNode) {
        setLocalActiveNode(treeRef.current.activeNode);
      }
    }, 100); // 可根据业务需求调整轮询间隔

    return () => clearInterval(interval);
  }, [localActiveNode, treeRef]);

  // 调用Tree的setActiveNode时，本地状态会自动同步
  const handleUpdateNode = (newNode) => {
    treeRef.current?.setActiveNode(newNode);
  };

  return (
    // 组件渲染逻辑，使用localActiveNode或content
    <div>{/* ... */}</div>
  );
}

注意：轮询方式存在轻微性能损耗，仅作为无法修改Tree组件时的备选方案。

方案三：使用React 18+的useSyncExternalStore #

如果使用React 18，可通过useSyncExternalStore订阅Tree内部状态的变化，这是官方推荐的外部状态同步方案：

1. 修改Tree组件，添加订阅机制：

// Tree组件内部
import { useState, useImperativeHandle, forwardRef } from 'react';

const Tree = forwardRef((props, ref) => {
  const [activeNode, setActiveNode] = useState<NodeModel<TreeNodeData<C>> | null>(null);
  // 存储订阅回调的集合
  const subscribers = new Set<() => void>();

  // 当activeNode变化时通知所有订阅者
  useEffect(() => {
    subscribers.forEach(callback => callback());
  }, [activeNode]);

  useImperativeHandle(ref, () => ({
    activeNode,
    setActiveNode,
    // 暴露订阅方法
    subscribe: (callback: () => void) => {
      subscribers.add(callback);
      // 返回取消订阅的函数
      return () => subscribers.delete(callback);
    },
    // 暴露获取当前状态的方法
    getActiveNode: () => activeNode
  }));

  // Tree组件其余渲染逻辑...
});

2. 在DefaultTreeContentBox中使用useSyncExternalStore：

// DefaultTreeContentBox组件内部
import { useSyncExternalStore } from 'react';

export function DefaultTreeContentBox({ content, options, treeRef }) {
  // 订阅Tree内部的activeNode变化
  const activeNode = useSyncExternalStore(
    // 订阅函数：返回取消订阅的方法
    () => treeRef.current?.subscribe || (() => () => {}),
    // 获取当前状态的函数
    () => treeRef.current?.getActiveNode() || null
  );

  return (
    // 直接使用activeNode渲染，状态变化会自动触发重渲染
    <div>{activeNode?.data.content}</div>
  );
}

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