在React/Redux应用程序中,我应该何时明确传递一个prop,而不是使用mapStateToProps从全局状态中提取它?

Eug*_*ene 10 javascript reactjs redux react-redux

我正在构建我的第一个React-Redux应用程序,在很多情况下,我可以选择执行<PaginationBox perPage={perPage} />或执行<PaginationBox />,然后执行

function mapStateToProps({pagination: {page}}) {
  return {
    pageNumber: page + 1
  };
}
Run Code Online (Sandbox Code Playgroud)

使用这种或那种方式的含义是什么?我应该何时优先选择其中一种?

有关如何拾取道具的既定最佳实践吗?每次我mapStateToProps在一些深度嵌套的组件中使用时,我感觉有点不好,因为感觉组件被耦合到特定页面/应用程序的状态.

mar*_*son 4

没有一个好的答案。根据http://redux.js.org/docs/FAQ.html#react-multiple-components上的 Redux FAQ ,您可以决定在组件层次结构中的哪个位置连接组件有意义。它可以位于“LeftSidebar / RightMainPanel”级别,也可以更细粒度。在某些情况下,例如尝试优化列表以提高性能,您可能会连接列表本身并检索项目 ID,并且每个 ListItem 本身也会连接并通过 ID 检索自己的数据。

对于这种特殊情况,我可能倾向于<PaginationBox />连接并<PaginationItem />根据需要呈现无状态功能组件,这主要是因为各个项目除了数字和要单击的链接之外不需要附加任何真实信息。但是,这只是一个意见。