React状态数组更新时阻止类组件重渲染子函数组件

问题根因 #

• 核心触发点：useSelector 默认使用严格相等（===）判断订阅状态是否变化。当前所有FooComponent都直接订阅全量state.users数组，只要reducer返回新的数组引用（哪怕仅修改了数组中1个元素），所有订阅该值的组件都会被判定为状态更新，直接触发重渲染。
  之前给FooComponent包裹React.memo无效的原因是：React.memo仅拦截父组件props变化导致的重渲染，而本场景的重渲染是组件内部useSelector主动触发的，memo不会拦截这类渲染逻辑。
• 次要隐患：Home组件render方法中每次执行都会内联创建name配置对象传给FooComponent，一旦Home组件触发重渲染，就会给子组件传递新的对象引用，额外触发重渲染。
• 附带逻辑bug：Reducer中更新用户数据时，错误使用matchedUsers的循环索引i给users数组赋值，会导致数组元素更新错位，不属于重渲染问题的直接原因，但会导致数据渲染异常。

修复方案 #

1. 调整useSelector订阅粒度，仅订阅组件自身需要的数据 #

不要在组件中订阅全量users数组，直接在useSelector中筛选当前组件需要的单个用户数据，配合浅比较判断值是否真的变更：

// FooComponent.js
import { shallowEqual, useDispatch, useSelector } from 'react-redux';

const FooComponent = (props) => {
    const dispatch = useDispatch();
    // 直接返回当前组件需要的value值，不返回全量数组
    const displayValue = useSelector(state => {
        const matchedUser = state.users.find(u => u.id === props.name.id);
        return matchedUser ? matchedUser.value : props.name.value;
    }, shallowEqual); // 浅比较返回值，值不变就不触发重渲染

    // 组件挂载逻辑保持不变
    useEffect(() => {
        dispatch({ type: 'addUser', userInfo: { id: props.name.id, subName: props.name.userName, value: props.name.value } });
    }, [])

    return (
        <div className="card shadow-sm p-3 mb-5 bg-white rounded">
            <div className="card-header">
                <h5>User Id: {props.name.id}, Name: {props.name.userName}</h5>
            </div>
            <div className="card-body">
                <h6 className="card-subtitle mb-2 text-muted">{displayValue}</h6>
            </div>
        </div>
    );
}

export default FooComponent;

2. 优化Reducer更新逻辑，保持未修改数据的引用稳定 #

修改原有的全量浅拷贝逻辑，仅对实际发生变更的用户对象创建新引用，未变更的用户保持原引用，进一步减少不必要的渲染触发，同时修复索引赋值bug：

// reducer部分
case 'getValues':
    let matchedUsers = [];
    // ... 原有获取更新用户列表的逻辑保持不变
    
    if (matchedUsers.length > 0) {
        const users = state.users.map(user => {
            // 查找当前用户是否在更新列表中
            const updatedUser = matchedUsers.find(m => 
                m.uniqueName === user.uniqueName && m.subName === user.subName
            );
            // 存在更新则返回新对象，否则返回原对象保持引用不变
            return updatedUser ? { ...user, value: updatedUser.value } : user;
        });
        return {
            ...state,
            users
        }
    }
    break;

3. 消除内联props的引用不稳定问题 #

将Home组件中传给FooComponent的配置对象提取到组件外部，避免render执行时重复创建新对象：

// Home.js
// 提取到类外部，全局保持引用稳定
const USER_CONFIGS = [
    { id: '001', userName: 'Alvin', value: 0 },
    { id: '002', userName: 'Simon', value: 0 },
    { id: '003', userName: 'Theodore', value: 0 }
];

class Home extends Component {
    static displayName = Home.name;
    
    componentDidMount() {
        this.timerID = setInterval(() => {
            this.props.getValues();
        }, 100);
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    shouldComponentUpdate() {
        console.log('Home - shouldComponentUpdate lifecycle');
        return false;
    }

    render() {
        return (
            <div className="container">
                <h1>Timers</h1>
                <div className="row">
                    <div className="col-sm">
                        {USER_CONFIGS.map(config => (
                            <FooComponent key={config.id} name={config} />
                        ))}
                    </div>
                </div>              
            </div>
        );
    }
}
// connect逻辑保持不变

优化效果 #

修改完成后，仅当单个FooComponent对应的用户value值实际发生变更时，该组件才会触发重渲染，其余未关联数据变更的组件不会被触发重渲染。原有配置的shouldComponentUpdate、React.memo可保留作为多层防护。

内容的提问来源于stack exchange，提问作者user2529011