react的列表最优搜索方案

Question

一个列表过滤功能 过滤条件 name == searchValue

方案一
在connect

const mapStateToProps = ({itemStore}, ownProps) => {
    const { searchValue, fullArr } = itemStore
    const subArr = fullArr.filter(item => item.name.indexOf(searchValue) > -1)
    return {
        ...itemStore,
        subArr,
    }
}

这样每次store或者ownProps发生变化时候遍历一次
优点是代码量少,逻辑简单

方案二

在每次搜索条件onChange的时候和在queryData的时候就根据搜索条件去setState或者dispatch去改变subArr

方案三

在componentWillReceiveProps时候进行操作

// 使用redux规定每次查询都返回一个新的list
componentWillReceiveProps(nextProps) {
    const { searchValue, fullArr } = this.props
    if(
        nextProps.fullArr !== fullArr ||
        nextProps.searchValue !== searchValue
    ){
        const subArr = .....
        this.setState({
            subArr,
        })
    }
}

这样就性能比方案一好，但这显得componentWillReceiveProps有点臃肿
目前我采用的是方案三

大神们给个建议

Answer 1

1. 保持组件简单，是我们毕生的追求，

2. 性能也不是首先需要考虑方向

当我们需要精确的控制计算，来提高性能的时候。 可以使用reselect。
详情请参考blog为什么我们需要reselect

Answer 2

使用reselect创建有记忆功能的selector函数，这样只有当你的searchValue和 fullArr发生改变时，mapStateToProps才会重新计算，否则就直接使用上次缓存的对象，因为是同一个对象，redux也不会重新render当前组件。

Answer 3

关于方案三，臃肿不是个大问题，conponentWillReceiveProps需要注意的是性能消耗，你这里是完全可行的，也可以把代码封装成一个方法去调用来减少视觉混乱。

不过我有一点不太明白，这个filter完全可以不借助外部参数实现，只在render的时候根据searchValue来决定不同的渲染值即可，这样是不是更简便？还是有什么我没想到的问题？