createSelector

如果子组件中使用了useSelector来获取数据，也会存在一些不必要的渲染。

提示：

一般情况下，只要我们dispatch 了 action，store发生了变更之后，那么传递给useSelector的选择器器就会被重新调用，如果选择器返回的结果跟原来的状态不一样，则组件重新被渲染。

xxxxxxxxxx
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';


function ProductChild() {
     const list=useSelector(state=>state.product.list.filter(item=>item.name.length>2))
    useEffect(() => {
        console.log('子元素重新渲染')
    })
    return (
        <div>
            子元素
    </div>
    );
}
export default React.memo(ProductChild)

我们可以使用createSelector来定义有记忆的选择器。

xxxxxxxxxx
//slices/productSlice.js
import { createSelector} from '@reduxjs/toolkit'
export const selectList= createSelector([state =>{
    
    return state.product.list
} ], (list) => {
    console.log('重新计算list')
    return list.filter(item=>item.name.length>2)
})

createSelector函数可以接收N-1个输入函数，一个输出函数（最终的选择器），前面的N-1个输入函数的参数由调用输出函数的时候传入的参数决定，输出函数的参数由前面N-1个输入函数的返回值决定。只有当输出函数的参数发生了变更，输出函数才会被重新执行。

xxxxxxxxxx
//pages/ProductChild.js
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import {selectList} from '../slices/productSlice'

function ProductChild() {
    //  const list=useSelector(state=>state.product.list.filter(item=>item.name.length>2))

   const list=useSelector(selectList)
  
    useEffect(() => {
        console.log('子元素重新渲染')
    })
    return (
        <div>
            子元素
    </div>
    );
}
export default React.memo(ProductChild)