react-redux使用useSelector获取数据导致组件重复渲染的问题

现象：通过redux中的hooks – useSelector 获取store中的数据时，只要store中的数据发生了改变，即使组件中并没有获取修改的数据，组件也会进行重新渲染。

原因：是因为useSelector中默认使用的是 === 来判断两次获取的数据结果是否相同， 如果我们返回的是一个新对象（如果返回的是基本数据类型，则不存在该问题），那么每次比较结果都为false，导致了很多不必要的re-render。如下：

const _obj = useSelector((store: any) => ({      
  aaa: store.xxx.aaa,      
  bbb: store.xxx.bbb, 
}));

解决：可以通过useSelector hooks的第二个参数。useSelector的第二个参数是一个比较函数，比较结果为true是不进行重新渲染，为false才渲染。可以使用react-redux提供的shallowEqual函数、lodash的isEqual()， 或者自己定义的函数。

import { useSelector, shallowEqual } from 'react-redux'; 

const _obj = useSelector((store: any) => ({      
  aaa: store.xxx.aaa,      
  bbb: store.xxx.bbb, 
}), shallowEqual);