React 记坑 ----- 关于 react-redux 中共享状态更新时自动重新 render 页面的问题

自动重新 render 的触发条件

1. 组件中的 render 方法内 return 部分使用了共享状态数据
2. 通过 reducer 改变了共享状态数据的值

遇到的问题

import { ADD_PERSON, DELETE_PERSON} from '../constant'
export default function personReducer(preState = {personArr: []}, action) {
    const {type, data} = action
    
    switch (type) {
        case ADD_PERSON: 
            // newPersonArr = preState.personArr;
            // newPersonArr.push(data)
            return {personArr: [...preState.personArr, data]}

        case DELETE_PERSON:
            let newPersonArr = [];
            newPersonArr = preState.personArr.filter(item => item.order !== data)
            return {personArr: newPersonArr}

        default: 
            return preState
    }
}

在 case ADD_PERSON: 内，如果通过下面的逻辑来改变共享状态数组

newPersonArr = preState.personArr;
newPersonArr.push(data)

实际上这个数组并没有真正意义上的改变，因为它是一个引用数据类型，真正意义上的改变只能是它保存的内存地址发生改变，所以需要拷贝原数组然后用一个新的内存地址指向它，再来添加新元素到这个新数组中才真正意义上改变了共享状态数据，此时才会触发组件 自动重新 render 的条件 ！！！