Javascript 分派后从不同状态片上重新呈现组件

在react/redux中（使用工具包）：

我已经让组件重新渲染-在重新渲染操作中触发。 作用于不同的层面

所以我的DOM结构如下

<DataWindow>

<DataSelector />

<DataIncoming />

<DataCardContainer />

</DataWindow>

让我困惑的是，DataCardContainer和DataWindow根本不涉及逻辑片-

因此，我的问题是：为什么组件DataCardContainer在每次从DataIncoming发送时重新呈现？如果它生成的值发生更改，useSelector（）将导致重新呈现。返回对象时，请注意，除非它是引用相等的同一对象，否则即使对象属性相同，组件也会重新渲染。您可以通过始终返回相同的对象来解决此问题

在您的情况下，只选择所需状态的最简单方法是告诉useSelector进行浅层相等比较，而不是引用相等比较。useSelector接受比较器函数作为第二个参数：

import { shallowEqual, useSelector } from 'react-redux'

const user = useSelector(
    ({user}) => ({
        id: user.id
        name: user.name
        lastName: user.lastName
    }),
    shallowEqual
);

如果生成的值发生更改，useSelector（）将导致重新渲染。返回对象时，请注意，除非它是引用相等的同一对象，否则即使对象属性相同，组件也会重新渲染。您可以通过始终返回相同的对象来解决此问题

在您的情况下，只选择所需状态的最简单方法是告诉useSelector进行浅层相等比较，而不是引用相等比较。useSelector接受比较器函数作为第二个参数：

import { shallowEqual, useSelector } from 'react-redux'

const user = useSelector(
    ({user}) => ({
        id: user.id
        name: user.name
        lastName: user.lastName
    }),
    shallowEqual
);

---

但我仍然感到困惑：useSelector（）是否不仅会导致选定状态，还会导致整个状态重新呈现？如果只是选定的状态。。。我不明白你的建议怎么会是一个解决方案？。。。再一次。。。关键的是，在一个组件上的选定切片中，这两个组件不会改变第三个组件中的任何内容。唯一作用的是逻辑片，而作业片在分派到逻辑片时重新呈现。该组件正在显示状态对象的不同部分。然而，这一部分的国家重新呈现？是这样吗？Redux将所有内容存储在单个状态对象中。状态useSelector函数的每次更改都会进行检查，如果有任何更改，请记住它会进行对象引用检查（这是关键），即使您的值相同，但对象引用可能已根据状态的结构进行了更改。如果要覆盖，需要在useselector中通过shallowEqual。如果通过shallowEqual，选择器将不执行引用相等性检查，而是执行值检查.copy。我假设默认行为只是状态的一部分被更改。。。不是整个状态对象。浅相等似乎不起作用。。。在useselectors中添加所有shallowequals不会执行任何操作-编辑。我是个白痴。但我仍然感到困惑：useSelector（）是否不仅会导致选定状态，还会导致整个状态重新呈现？如果只是选定的状态。。。我不明白你的建议怎么会是一个解决方案？。。。再一次。。。关键的是，在一个组件上的选定切片中，这两个组件不会改变第三个组件中的任何内容。唯一作用的是逻辑片，而作业片在分派到逻辑片时重新呈现。该组件正在显示状态对象的不同部分。然而，这一部分的国家重新呈现？是这样吗？Redux将所有内容存储在单个状态对象中。状态useSelector函数的每次更改都会进行检查，如果有任何更改，请记住它会进行对象引用检查（这是关键），即使您的值相同，但对象引用可能已根据状态的结构进行了更改。如果要覆盖，需要在useselector中通过shallowEqual。如果通过shallowEqual，选择器将不执行引用相等性检查，而是执行值检查.copy。我假设默认行为只是状态的一部分被更改。。。不是整个状态对象。浅相等似乎不起作用。。。在useselectors中添加所有shallowequals不会执行任何操作-编辑。我是个白痴。它起作用了。

function DataCardContainer(){    
    const madeData = useSelector(selectMadeData); //from the slice 'data'
    const jobData = useSelector(selectJobs); // from the slice 'jobs'
    const dataCards = madeData.map(x=>{
        const foundJob = jobData.find(y=>y.jID === x.attachedJID);
        console.log(foundJob,"founjob"); //this logs when i click on any of the 'incDataCard' rendered in DataIncoming
        return(<DataCard key={x.DataKey} props={x} jobInfo={foundJob} />)})


    return(
        <div className="DataCardContainer">
           {dataCards}
        </div>
    )


}

    setDataSelector:(state,action)=>{
        state.dataSelector=action.payload;
        console.log("yay, setDataSelector");
        return state;
    }

import { shallowEqual, useSelector } from 'react-redux'

const user = useSelector(
    ({user}) => ({
        id: user.id
        name: user.name
        lastName: user.lastName
    }),
    shallowEqual
);