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

Question

I have a large, heavy non-React component HeavyThing . Now I'd like to wrap this component as a React component to use it inside a React app.

Two questions regarding this:

1. Is it correct to store the heavyThing in a state? I fear that when something inside heavyThing changes, the component will get re-rendered by react all the time.

2. Data is passed into the React component using props.data , but the HeavyThing only knows clearData and addData to set new data. I fear that useEffect to set new data would clear and add the data many many times even if there's no new data. Do I need to implement some mechanism that checks whether props.data has changed? How?

Maybe I'm doing it completely wrong, so I'm very open to better patterns.

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 />
    );
}

or if you need to mount it in the 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} />
    );
}