关于reactjs:Redux:mapStateToProps为什么第二个参数ownProps

Redux: mapStateToProps why second parameter ownProps

我见过很多次人们将redux连接到组件,并且他们在mapStateToProps中使用第二个参数。

1
2
3
4
5
function mapStateToProps(state, ownProps) {
   return {
   rowData: state.table.rows[0],
   };
}

是没有用的吗? 如果子组件已经从父组件传递了道具,为什么我们要在mapStateToProps中再次映射/传递它们?

这有什么好处?

问候


您可以借助一些道具保留一些可能很小的商店数据子集,从而避免不必要的渲染。

例如,您有一个幻灯片应用程序,并且Redux存储了所有幻灯片,而您的组件负责一张幻灯片。道具值包含幻灯片编号。通过仅提取特定幻灯片的存储数据,您可以使React和React-Redux更容易避免不必要的重新渲染。可能是由于其他用户在协作演示编辑器中编辑了另一张幻灯片而导致商店更改了-没有理由重新呈现您的幻灯片。

https://react-redux.js.org/api/connect#ownprops

此外,Redux是全局状态,而您的组件可以使用该组件所需的数据。如果您打算重用您的组件,或者打算从Redux(甚至是React)切换到其他组件,或者只是想通过将Model与View分离来遵循良好实践,那么将您的组件从本质上分离是有意义的尽可能多地使用单例全局变量。通过仅裁剪所需的数据,并可能将其调整为满足组件的需求,就可以执行从全局Model到本地ViewModel的映射,并且很容易将组件带到其他地方,而不必担心实现时的全局Model是什么它。通过使用例如。重新组合,您可以更进一步,使事情可以自由地移动。


mapStateToProps中第二个参数的用法完全取决于应用程序。通常,您可能不需要它,但是在某些情况下,选择器取决于props来过滤出结果,使用mapStateToProps中的props值很有用。

您可能需要使用道具的情况是

  • 假设您有一个称为used的redux状态数据,则只需要显示特定区域中的用户即可作为组件的支持。您可以在mapStateToProps中使用此prop值并返回过滤后的结果,而不是返回整个结果并在render中过滤,这可能会降低性能

当您想从props中提取一些值或使用props中的值在mapStateToProps的返回值中分配值时,第二个参数通常会出现在图片中。一种经典用法是编写选择器,该选择器使用来自storeprops的值传递给组件。


那里可能会覆盖前一个字段,因此您可以选择。

例如:return Object.assign({},state,ownProps);