我应该使用 connect 还是 hooks 来响应 redux 并且哪个具有更好的性能？答案

【问题标题】：Should I use connect or hooks for react redux and which has better performance?我应该使用 connect 还是 hooks 来响应 redux 并且哪个具有更好的性能？
【发布时间】：2021-03-08 10:18:01
【问题描述】：

我在我的 react 项目中使用 react-redux，显然，有两种方法可以使用 redux 状态 connect 或 useSelector,

我的 redux 商店每个页面都有一个 reducer，

首页 > homePageReducer

留言页>messagePageReducer

用于身份验证> authReducer

用户博客>blogReducer

关于设置>userSettingsReducer

对于用户的个人资料> userProfileReducer

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


const {home, messages, auth, settings, blogs} = useSelector( (state:RootState) => state)

return(
<main>
     <Switch>
         <Route exact to={HOME_ROUTE}>
              <HomeApp auth={auth} settings={settings} userProfile={userProfile}/>
         </Route>
         <Route exact to={CHAT_ROUTE}>
              <ChatApp auth={auth} messages={messages} userProfile={userProfile}/>
         </Route>
         <Route exact to={BLOG_ROUTE}>
              <BlogApp auth={auth} blogs={blogs} userProfile={userProfile}/>
         </Route>
     </Switch>
</main>
)

这对我的项目来说是一个好的架构并且不会给我的项目带来性能问题，还是我应该在这些组件中使用connect 或useSelector hook？什么比较好？

【问题讨论】：

connect 被认为是仅用于类组件的旧方式。如果您的组件是作为功能组件制作的，那么您不能使用连接，而应该使用钩子。您当前方法的一个问题是，由于您的主要组件是“订阅”状态中的每个对象（home、messages、auth、settings、blogs），其中任何一项的更改都会触发完整的重新渲染，即使对于没有更改其值的组件也是如此。
所以简而言之，使用 hooks/useSelector，你的组件本身应该负责从 redux 存储中获取数据，而不是你的主/父组件
@nbokmans 我同意你的所有观点，但功能组件可以使用connect。不过最好使用钩子！
@Khan 你可以在Redux Style Guide找到所有推荐的最佳实践
@LindaPaiste 很有趣，不知道，谢谢你告诉我。

标签： javascript reactjs typescript redux

【解决方案1】：

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

Use the React-Redux Hooks API

首选使用 React-Redux 钩子 API（useSelector 和 useDispatch）作为从 React 组件与 Redux 存储交互的默认方式。

Connect More Components to Read Data from the Store

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

Call useSelector Multiple Times in Function Components

使用useSelector 挂钩检索数据时，更愿意多次调用useSelector 并检索少量数据，而不是在一个对象中返回多个结果的单个较大的useSelector 调用。

您肯定想使用useSelector。您的Route 渲染组件不应选择父级中的所有内容并将其传递下去，而应该不使用任何道具并从 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>
  )
}

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 );
 
  ...
}

您可能想要create selector functions，尤其是对于像userProfile 这样的常用值。

修改当前组件HomeApp 等的替代方法是创建一个HomeScreen 组件作为HomeApp 的包装器，并将HomeApp 保留为纯表示组件。 HomeScreen 将从 Redux 获取所有数据并使用正确的 props 调用 HomeApp。

【讨论】：