反应提示-重新选择

React和Redux是朋友,彼此互补。 React Components可以订阅Redux存储,并且一旦状态(Redux状态)发生改变,这些组件就会重新渲染。 因此,订阅Redux的任何组件都会在状态更改时重新呈现。 这就是重点!

如您所知,重新渲染可能不是一个好主意,这是需要优化React Redux应用程序的主要原因,这是Reselect的主要目的。

但是, 选择器是什么? 选择器是可以计算或从存储中检索数据的功能。 我们通常使用mapStateToProps函数获取状态数据:

  const getSomeData =(someData,isActive){ 
返回someData.find(d => d.isActive === isActive)
}
  const mapStateToProps =(状态)=> { 
返回 {
someData:getSomeData(state.someData,state.isActive)
}
}

在上面的示例中,getActiveData方法从someData返回状态为active的所有记录。 问题在于,只要状态的任何部分更新,此函数都会重新计算该数据。 当然,在这种特殊情况下,计算非常简单,但是如果每次Redux存储更新时此计算花费几秒钟,该怎么办。

这是重新选择播放的地方。 重新选择的作用是除非输入参数不变,否则重新计算不会发生。

重新选择将输入自变量缓存到已记忆的函数。 因此,仅当函数的参数与上一次调用不同时,选择器才会重新计算。

  const getSomeData =(someData,isActive){ 
返回someData.find(d => d.isActive === isActive)
}
  const makeGetSomeData = createSelector ([ getSomeData ],(data,active)=> { 
return(someData)=> someData
}

Reselect提供了一个createSelector API,用于创建备注选择器。 createSelector将输入选择器数组和一个转换函数作为其参数。 如果输入选择器的值与先前对选择器的调用相同,则它将返回先前计算的值。

那是所有人

谢谢阅读!

reduxjs /重新选择
重新选择– Redux github.com的选择器库