为什么 useDispatch 重新渲染父组件？

Question

我onSelect在 Tree 组件（来自 Ant 库）的回调中使用 useDispatch 钩子（来自 Redux ）：

export const MyComponent = () => {

    const dispatch = useDispatch();

    const onSelect = (selectedNode) => {
            const selectedItem = selectedNode[0];
            dispatch(fetchSelectedItems(selectedItem));
    };

    return 
        <Tree
            onSelect={onSelect}
        >
            <TreeNode .. />
            <TreeNode .. />
            <TreeNode .. />
        </Tree
}


export const fetchSelectedItems = (selected: string) =>
    (dispatch) =>
        axios({
            url: `/api/items?id=${selected}`,
            method: 'GET',
        }).then(response => {
            dispatch(fetchSelectedItemsSuccess(response.data))
        }).catch((error: any) => {throw(error)});

为什么要useDispatch重新渲染父组件？有什么办法可以防止这种情况发生吗？我useCallback在 Redux 文档中尝试过，但此解决方案是为了防止重新渲染子组件，而不是父组件。

Answer 1

我认为在每次渲染时您都会重新声明 onSelect 函数。函数是引用类型。在渲染时传递重新声明的函数及其新引用将导致重新渲染。也许您应该考虑使用上下文。