反應鈎子避免重新渲染並保留所需的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]);