React封装第三方组件并暴露状态的实现疑问与优化

我开发了一个用于封装带内部状态的第三方Web组件的React组件，希望将其状态提升至App层，以便感知状态变化并按需改写状态，但不确定实现方式是否正确。

目前我的代码如下（为简化展示的伪代码）：

function MyWrapper({state, setState}) {
  const ref = useRef(null);
  const [api, setApi] = useState(null);
  
  useEffect(() => {
    const api = SomeNonReactComponent(ref);
    setApi(api);
  }, [ref]);

  useEffect(() => {
    api.state = state;
  }, [api, state]);
  
  function onStateChanged() {
    setState({...api.state})
  }
  // (this callback is passed to api)

  ...

  return <div ref={ref} />
}

问题1：我的实现思路是否合理？有没有更优的最佳实践？ #

问题2：当用户交互改变组件内部状态时，出现了如下问题： #

• api.state发生变化
• API通过调用onStateChanged()发出通知
• 调用setState传入新状态
• App层的state变量更新并向下传递
• state属性更新
• MyWrapper重新渲染
• useEffect响应并更新api.state
  导致api.state被设置为自身值，产生无意义的冗余渲染，该如何解决？
  （我找到的资料大多基于类组件，而非函数组件）

解答 #

问题1：思路合理性与优化方案 #

你的核心方向没问题——用ref获取第三方组件实例，通过状态提升实现React与非React组件的状态同步。但有几个可以优化的点：

• 避免用useState存api实例：api是组件实例，属于可变引用，用useRef存储更合适，不会因为api变化触发组件重新渲染。
• 初始化逻辑简化：第三方组件只需要在挂载时初始化一次，所以useEffect依赖设为空数组即可，同时要加上清理逻辑，防止内存泄漏：

const ref = useRef(null);
const apiRef = useRef(null);

useEffect(() => {
  const api = SomeNonReactComponent(ref.current);
  apiRef.current = api;
  // 注册状态变化回调
  api.onStateChanged(onStateChanged);
  
  // 组件卸载时清理
  return () => {
    api.offStateChanged(onStateChanged);
    api.destroy?.();
  };
}, []);

• 坚持单向数据流：把React的state作为唯一数据源，初始化时同步给第三方组件，后续只有React状态更新时才同步过去，避免双向同步的混乱。

问题2：解决冗余渲染循环 #

你遇到的是典型的状态同步循环：第三方组件改状态→同步到React→React改状态→同步回第三方组件→再次触发同步。解决关键是增加值对比，跳过无意义的同步：

1. 同步React状态到第三方组件时做对比：

useEffect(() => {
  if (!apiRef.current) return;
  // 浅对比状态，只有当值不同时才更新
  const needUpdate = !Object.entries(state).every(([key, val]) => {
    return apiRef.current.state[key] === val;
  });
  if (needUpdate) {
    apiRef.current.state = {...state};
  }
}, [state]);

2. 第三方组件同步到React时也做对比：

function onStateChanged() {
  const currentApiState = apiRef.current.state;
  // 对比当前React状态和api状态，不同才更新
  const needSync = !Object.entries(currentApiState).every(([key, val]) => {
    return state[key] === val;
  });
  if (needSync) {
    setState({...currentApiState});
  }
}

这样就能切断循环，避免无意义的渲染和重复赋值。如果状态是复杂对象，可以考虑用深对比，但浅对比在大部分场景已经足够，性能也更好。

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