在React中包装一个重的非React组件

Question

我有一个大的，沉重的非react组件HeavyThing。现在我想把这个组件包装成一个React组件，以便在React应用程序中使用它。

有两个问题:

1. 将heavyThing存储在某个状态是否正确?我担心当heavyThing内部发生变化时，组件会一直被react重新渲染。

2. 使用props.data将数据传递到React组件，但是HeavyThing只知道clearData和addData来设置新数据。我担心useEffect设置新数据会在没有新数据的情况下多次清除和添加数据。我是否需要实现一些机制来检查props.data是否发生了变化?如何?

也许我这样做完全错了，所以我非常愿意接受更好的模式。

export default function HeavyComponentWrapper(props) {
const elementRef = useRef();
const [initialized, setInitialized] = useState(false);
const [heavyThing, setHeavyThing] = useState({});
useEffect(() => {
if(!initialized){
const h = new HeavyThing();
await h.when();
setHeavyThing(h); // Ok to store the reference in a state?
setInitialized(true);
}
heavyThing.clearData(); // Right way to ....
heavyThing.addData(props.data); // ... update data?
});
return (
<div className="targetDiv" ref={elementRef}>
</div>
);
}

Answer 1

export default function HeavyComponentWrapper(props) {
const heavyComponentRef = useRef(new HeavyThing());
const [initialized, setInitialized] = useState(false);
useEffect(() => {
h.when().then(() => setInitialized(true));
}, []);

useEffect(() => {
heavyThing.clearData();
heavyThing.addData(props.data);
}, [props.data]);

return (
<div />
);
}

或者如果你需要将它装入div

export default function HeavyComponentWrapper(props) {
const wrapperElementRef = useRef(null);
const heavyComponentRef = useRef();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
heavyComponentRef.current = new HeavyThing({container: wrapperElementRef.current})
h.when().then(() => setInitialized(true));
}, []);

useEffect(() => {
heavyThing.clearData();
heavyThing.addData(props.data);
}, [props.data]);

return (
<div ref={wrapperElementRef} />
);
}