在整个应用程序中使用 Redux 选择器是不好的做法吗？答案

【问题标题】：Is using Redux selectors throughout your application bad practice?在整个应用程序中使用 Redux 选择器是不好的做法吗？
【发布时间】：2020-05-21 09:00:23
【问题描述】：

有人可以向我解释什么是更好的方法吗？虽然我觉得使用方法 A 的重新渲染比使用方法 B 的要多，但我并没有真正在网上看到太多关于此的文章。

// Approach A
// ComponentA.jsx
export default () => {
    . . .
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
    )
}

// ComponentB.jsx
export default () => {
    . . .
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
    )
}

// ComponentC.jsx
export default () => {
    . . .
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
    )
}

// Entry.jsx
export default () => {
    return (
        . . .
        <ComponentA />
        <ComponentB />
        <ComponentC />
        . . .
    )
}

// Approach B
// ComponentA.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentB.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentC.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// Entry.jsx
export default () => {
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
        <ComponentA user={user} token={token} />
        <ComponentB user={user} token={token} />
        <ComponentC user={user} token={token} />
        . . .
    )
}

我错了，真的没有区别，还是两者有更好的方法？

【问题讨论】：

在这种情况下只使用上下文。
你能在帖子回答中详细说明吗？

标签： reactjs react-hooks

【解决方案1】：

由于所有子组件都使用来自 redux 的相同状态，因此最好在父组件中定义它并让所有子元素使用相同的引用，而不是在每个子组件中创建相同变量的多个引用。

这样，您的应用将使用更少的内存。

因此，在您的情况下，以下解决方案效率更高

// ComponentA.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentB.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// ComponentC.jsx
export default ({ user, token }) => {
    . . .
    return (
        . . .
    )
}

// Entry
export default () => {
    const [user, token] = useSelector(({ auth: { user, token } }) => [user, token])
    return (
        . . .
        <ComponentA user={user} token={token} />
        <ComponentB user={user} token={token} />
        <ComponentC user={user} token={token} />
        . . .
    )
}

【讨论】：