这是一个一般的理论问题。
当存储中的所有组件都已全局可用时,使用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的本机,而不是我们使用它的组件