Question

我正在使用React.Context将一些函数传递给我的嵌套子组件。为此，我将一个包含我所有功能的对象传递给上下文，如下所示：

const MyComponents = props = {
    const func1 = () => {
        props.doSomething(props.value);
    }

    const func2 = () => {
        props.doSomething2(props.value);
    }

    return (
        <ProjectContext.Provider value={{func1, func2}}>
                <NestedChildComponents />
        </ProjectContext.Provider>
    )
}

我面临的问题是，MyComponent重新渲染时会创建一个新的上下文对象。 func1和func2具有新的引用，因此，使用ComponentContext的所有子组件也将重新呈现。

我想到的一种解决方案是将函数包装在useCallback中，这样它们就不会创建不必要的新引用，而不会将上下文值包装在useMemo中，因此上下文也不会如有必要，重新创建。看起来像这样：

const MyComponents = ({value1, value2, doSomething, doSomething2}) = {
    const incrementCount = useCallback(() => {
        doSomething(value1);
    }, [value1, doSomething])

    const func2 = useCallback(() => {
        doSomething2(value2);
    }, [value2, doSomething2])

    const contextValue = useMemo(() => {
        return {func1, func2};
    }, [func1, func2])

    return (
        <ComponentContext.Provider value={contextValue}>
                <NestedChildComponents />
        </ComponentContext.Provider>
    )
}

如果不需要，这将确保不重新创建contextValue，这样会更好。但是，此解决方案仍然存在问题，因为仅更改func1时，将重新创建整个上下文对象并具有新的引用，这意味着所有子组件都将重新呈现。

仅当上下文中的实际功能发生更改时，才可能重新渲染子组件吗？例如ChildComponent使用ComponentContext.func1，ComponentContext.func2更改后不应重新渲染。我已经读到可以通过使用this.setState来完成此操作，但是我更喜欢不使用Class组件，因此我想知道是否还有其他解决方案。

变异值对象时，ContextProvider重新呈现所有子组件

0 个答案: