使用 Hooks 和 Redux 的 ReactJS 良好实践。我应该在每个组件中使用 useSelector，还是应该通过 props 传递？

Question

我应该在每个子组件中使用相同的 useSelector 还是应该通过 props 传递 useSelector？

下面的两个例子都有效，我只想知道什么是最佳实践。

通过 props 传递的示例：

const FatherComponent = () => {
 const userId = useSelector((state) => state.user.id);

 return (
   <ChildComponent userId={userId} />
 )
}

const ChildComponent = ({userId}) => {
 return (
 <>{userId}</>
)
}

或重复 useSelector 的示例：

const FatherComponent = () => {
 const userId = useSelector((state) => state.user.id);

 return (
  <ChildComponent />
 )
}

const ChildComponent = () => {
 const userId = useSelector((state) => state.user.id);

 return (
  <>{userId}</>
 )
}

Answer 1

更喜欢让更多 UI 组件订阅 Redux 存储并在更细粒度的级别读取数据

为了完整起见，以上是来自官方 redux 站点的推荐。

完全归功于 Nicholas Tower，他在评论部分指出了该页面。

更喜欢让更多 UI 组件订阅 Redux 存储并在更细粒度的级别读取数据。这通常会带来更好的 UI 性能，因为当给定的状态发生变化时，需要渲染的组件更少。

例如，不是仅仅连接一个组件并读取整个用户数组，而是检索所有用户 ID 的列表，将列表项呈现为 ，并已连接并从商店中提取其自己的用户条目。

这适用于 React-Redux connect() API 和 useSelector() 钩子。

从链接 - https://redux.js.org/style-guide/style-guide#connect-more-components-to-read-data-from-the-store