当State已经在全球可用时,mapStateToProps的目的是什么



这是一个一般的理论问题。

当存储中的所有组件都已全局可用时,使用mapStateToProps从存储中选择一组特定数据并将其作为Prop发送到组件的目的是什么?

另一种说法是,为什么我要经历将状态映射到道具的额外步骤,以便我可以用props.something访问数据,而我只能用state.something访问它?

组件无法访问redux存储中的所有数据。他们只能访问redux存储中作为props传递给他们的数据。

就你关于mapStateToProps的用途的问题而言,以下是mapStateToProps的主要用途:

  • 告诉react-redux任何特定组件需要什么数据
  • 转换存储状态,并将转换后的状态作为道具传递给组件
  • 帮助react-redux决定特定组件是否应作为存储更新的结果重新渲染

告诉React Redux数据组件需要什么

mapStateToProps函数告诉react-redux特定组件需要来自redux存储的什么数据。此函数将整个状态作为参数获取,但问题是您无法在React组件内部访问它。它被传递给mapStateToProps函数,而不是您的组件。因此,您需要react-redux将所需的数据作为props传递给您的组件。

正在转换存储状态

.mapStateToProps函数也可用于以适用于任何特定组件的方式转换存储状态,例如:

  • 将商店不同部分的不同状态组合在一起
  • 将数据作为特定的道具名称传递
  • 以适合组件使用的任何方式转换数据

帮助React Redux决定是否应重新渲染特定组件

现在您可能会问,如果我告诉react-redux将整个state参数作为prop传递给我的组件,会怎么样?

这样做的问题是,每当redux存储中的状态更新时,即使组件没有使用状态更改的任何部分,它也会重新渲染。

这种行为是由react-redux如何使用mapStateToProps函数来决定是否应根据商店的状态更新重新渲染组件引起的。

每当redux存储更新时,react-redux都会对mapStateToProps函数返回的对象的每个字段进行浅层比较(===(,如果其中任何字段不同,则会重新渲染组件。

为了防止这种行为,您使用mapStateToProps函数只获取组件内部实际使用的数据。这样,如果redux存储中更新了任何不相关的数据,就不会导致组件的重新渲染。

有关mapStateToProps功能的更多详细信息,请参阅:

React Redux: Extracting Data with mapStateToProps

这是因为数据存在于Redux Store中。因此,为了访问这些数据,我们必须传递这个HOC(高阶组件(mapStateToProps,并将其包裹在我们的组件中,例如我们的案例中的TodoList

connect(mapStateToProps)(TodoList)
  • 所以要访问商店的状态数据,我们必须首先通过props获取它
  • 简而言之,Store中存在的数据是在组件内部通过道具访问的,而不是通过状态访问的。由于State是Store的本机,而不是我们使用它的组件

最新更新