Question

我读到理论上这是可以的。在我的小用例中，我遇到了一个问题，即混合使用这些技术会导致双重重新渲染。

首先，当执行redux调度并且某些组件通过useSelector使用prop时。然后，在功能组件已经重新呈现之后，将应用useEffect钩子，该钩子会更新某些属性的状态。此更新再次重新触发渲染。

例如在我的情况下，以下控制台日志会打印两次。

问题：我应该删除useEffect和useState并将其集成到redux商店中吗？

import {useSelector} from "react-redux";
import React from "react";


const Dashboard = (props) => {
    const selFilters = useSelector((state) => state.filter.selectedDashboardFilters);
    const [columns, setColumns] = React.useState([]);

    React.useEffect(() => {
            let newColumns = getColumns();
            setColumns(newColumns)
        }, [selFilters]
    )
    
    console.log("RENDER")
    
    return (
        <h1>{columns.length}</h1>
    )
}

Answer 1

如果columns发生变化时需要重新计算selFilters，那么几乎可以肯定，您不应该在组件中重新计算它。如果columns是根据selFilters计算出来的，则可能根本不需要将其存储为状态。相反，您可以使用reselect创建一个getColumns()选择器，该选择器在相关状态发生变化时从该状态派生列。例如：

const getColumns = createSelector(
  state => state.filter.selectedDashboardFilters,
  selFilters => {
    // Compute `columns` here
    // ...
    return columns
  }
)

将Redux与useEffect Hook混合

1 个答案: