React：导致组件re-render的几种原因

1.state修改
2.props修改
3.父组件rerender

useSelector

redux里的hook useSelector
如果useSelector返回值改变，则会导致组件重渲染。返回值的改变为浅比较

const count = useSelector((state) => state.count)

1.useSelector如何将组件强制render的？

useSelector源码中使用了useReducer的修改state的dispatch函数，需要更新时执行该函数即可。本质上也是修改组件的state。

const [, forceRender] = useReducer((s) => s + 1, 0)
forceRender()

2.如何防止useSelector导致的多余渲染？

工作中项目中以下的写法，在store中其他数据修改，但count和name都没有修改的时候，useSelector返回的是一个新对象，则会导致组件重渲染。

const { count, name } = useSelector((state) => {
  return {
    count: state.count,
    name: state.name
  })

解决方法：使用react-redux提供的对对象的浅比较的方法shallowEqual（不是说比较值的地址，比较到第一层属性的值），也可以用lodash的_.isEqual（正儿八经的深比较）

shallowEqual({name: 'lily'}, {name: 'lily'})    // true
_.isEqual({name: 'lily'}, {name: 'lily'})    // true
shallowEqual({name: 'lily', arr: [1,2]}, {name: 'lily', arr: [1,2]})    // false
_.isEqual({name: 'lily', arr: [1,2]}, {name: 'lily', arr: [1,2]})    // true