反应钩子避免重新渲染并保留所需的deps

Question

我错过了 useEffect、useCallback 和 deps 的一些东西。

我有一个上下文和一个组件。 我的组件使用 fetch() 加载我需要的所有数据，并在上下文中将 boolean 设置为 true 以显示微调器。 当我需要时，我会在另一个组件中使用上下文。

const LoadingApp = ({children}) => {
    const loadingContext = useContext(LoadingContext);

    const fetchMyData = useCallback(() => {
        loadingContext.setLoading(true);
    }, [loadingContext]);


    useEffect(() => {
        fetchMyData();
    }, [fetchMyData]);

    return (
        <React.Fragment>
            {children}
        </React.Fragment>
    );
};


const LoadingProvider = ({children}) => {
    const [loading, setLoading] = useState(false);

    const setLoading = useCallback((isLoading) => {
        setLoading(loading + (isLoading ? 1: -1));
    }, [setLoading, loading]);

    const isLoading = useCallback(() => {
        return loading > 0;
    }, [loading]);

    return (
        <LoadingContext.Provider value={{setLoading, isLoading}}>
            {children}
        </LoadingContext.Provider>
    )
}

我知道我可以从 useEffect 或 useCallback 中删除 deps，但这似乎是解决我的问题的错误方法，因为需要 deps。

如何在 useEffect 或 useCallback 的上下文中调用 function 而无需重新渲染所有内容？

Answer 1

如果您正在调用setLoading ，那么您总是会触发您想要的重新渲染。

你可以有一个空的deps ，这意味着效果只会运行一次。

Answer 2

当loading值改变时，上下文总是改变。 将useEffect的依赖项更改为仅依赖于setLoading ，它基于useCallback （ useState setter 也不会更改），并且将保持固定。

const { setLoading } = useContext(LoadingContext);

const fetchMyData = useCallback(() => {
  setLoading(true);
}, [setLoading]);

您实际上并不需要useCallback ，因为它与原始setLoading所做的事情相同。 您可以安全地删除它：

const setLoading = useCallback((isLoading) => {
  setLoading(isLoading);
}, [loading]);