Javascript 我应该使用connect还是hooks进行react-redux，哪个性能更好？

我正在为我的react项目使用react-redux，显然，有两种方法可以使用redux状态

连接

或

使用选择器

我的redux商店每一页都有一个减缩器

对于主页>

homePageReducer

对于消息页>

messagePageReducer

用于身份验证>

authReducer

对于用户的博客>

blogReducer

对于设置>

用户设置减速机

对于用户配置文件>

userProfileReducer

在我的顶层组件或主组件中，我使用了一个选择器挂钩来获取所有减速器，并将减速器作为道具传递给所需的组件

const{home，messages，auth，settings，blogs}=useSelector（（state:RootState）=>state）
返回(
)

它对我的项目来说是一个好的体系结构，并且不会给我的项目带来性能问题，还是应该在这些组件中使用

connect

或

useSelector hook

？ 什么更好？

Redux有一个非常有用的方法来解释所有当前的最佳实践。该列表中有一些建议适用于您的示例

---

首选使用React-Redux挂钩API（

useSelector

和

useDispatch

）作为从React组件与Redux存储交互的默认方式

---

更愿意让更多的UI组件订阅Redux存储并以更细粒度的级别读取数据。这通常会导致更好的UI性能，因为当给定的状态改变时，需要呈现的组件会更少

---

当使用

useSelector

钩子检索数据时，最好多次调用

useSelector

并检索少量数据，而不要使用一个较大的

useSelector

调用在一个对象中返回多个结果

---

您肯定要使用

useSelector

。您的

路由

渲染组件不应该选择父级中的所有内容并将其向下传递，而应该不使用任何道具，从Redux本身获取所需的所有内容

const App = {
  return(
     <Switch>
         <Route exact to={HOME_ROUTE}>
              <HomeApp />
         </Route>
         <Route exact to={CHAT_ROUTE}>
              <ChatApp />
         </Route>
         <Route exact to={BLOG_ROUTE}>
              <BlogApp />
         </Route>
     </Switch>
  )
}

您可能希望特别是对于常见的访问值，如

userProfile

---

修改当前组件

HomeApp

等的另一种方法是创建一个

HomeScreen

组件作为

HomeApp

的包装，并将

HomeApp

保留为纯粹的表示组件

HomeScreen

将从Redux获取所有数据，并使用正确的道具调用

HomeApp

。

connect

被认为是仅用于类组件的旧方法。如果您的组件是作为功能组件制作的，那么您不能使用connect，应该使用挂钩。当前方法的一个问题是，由于您的主要组件是“订阅”处于状态的每个对象（

主页

，

消息

，

身份验证

，

设置

，

博客

），因此，其中任何一个组件的更改都将触发完全重新渲染，即使对于没有更改其值的组件也是如此，使用hooks/

useSelector

，您的组件本身应该负责从redux存储中获取数据，而不是从主/父级component@nbokmans我完全同意您的意见，但功能组件可以使用

connect

。不过最好用钩子@Khan您可以在@LindaPaiste中找到所有推荐的最佳实践，这很有趣，我不知道，谢谢您让我知道。

const HomeApp = () => {
  const userProfile = useSelector( (state: RootState) => state.user );

  // We probably don't need the whole auth object
  const isLoggedIn = useSelector( (state: RootState) => !! state.auth );

  // Do you need to return *every* setting?  Just select what you need.
  const settings = useSelector( (state: RootState) => state.settings );
 
  ...
}