混合Redux和useEffect钩子

Question

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

首先，当redux分派被执行时，一些组件通过useSelector使用属性。然后，在功能组件已经被重新呈现之后，将应用一个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

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

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