Javascript 组件更新缓慢，如何分发组件更新？

我有一个组件，其中数据作为对象数组来自reducer。接下来，构建表

<div className={'table-props'}>
                <Table striped bordered hover>
                    <thead>
                        ...
                    </thead>
                    <tbody>
                    {this.props.usersProps.usersProperties.map((item, index) => {
                        return <UsersProps
                            key={index}
                            index={index}
                            ID = {item.ID}
                            Name={item.Name}
                            ShortDescription={item.ShortDescription}
                            Description={item.Description}
                            Type={item.Type}
                            Required={item.Required}
                            IsMult={item.IsMult}
                            Active={item.Active}
                            Role={item.Role}
                            ReadOnly={item.ReadOnly}
                            IsService={item.IsService}
                            Selector={item.Selector}
                            Range={item.IndifferenceRange}
                            changePropsList={this.props.onChangePropsList}
                            openModal={this.openModal.bind(this)}
                        />})}
                        </tbody>
                </Table>

---

告诉我我做错了什么

我将modal放在一个单独的组件中，它帮助我使用react devtools并查看火焰图，该图告诉您哪个组件需要更多的时间重新启动。

 handleChange(e) {
        var propName = e.target.dataset.propname;
        var propsList = this.props.usersProps.usersProperties;
        propsList[this.props.index][propName] = e.target.value;
        this.props.changePropsList(propsList);
    }

function mapDispatchToProps(dispatch) {

    return {
        allUsersProps: bindActionCreators(allUsersProps, dispatch),
        saveUsersProps:bindActionCreators(saveUsersProps,dispatch),
        allRoles:bindActionCreators(allRoles,dispatch),
        onChangePropsList: (propsList) => {
            dispatch({ type: CHANGE_PROPS_LIST, payload: propsList })
        },
        onAddRow: (propsList)=>{
            dispatch({type:ADD_PROPS, payload: propsList})
        },
    }
}

export default function usersProperties(state = initialState, action) {

    switch (action.type) {
        case GET_PROPS_REQUEST:
            return {...state, fetchingProperties: true,responseSave: false};

        case GET_PROPS_SUCCESS:
            return {...state,
                usersProperties: action.payload,
                fetchingProperties: false,
            };
        case CHANGE_PROPS_LIST:
            return{
                ...state,
                usersProperties:action.payload
            };
        case ADD_PROPS:
            return{
                ...state,
                usersProperties:action.payload
            };
        case SAVE_USERS_PROPS_REQUEST:
            return{
                ...state,
                savingProps: true,
            };
        case SAVE_USERS_PROPS_RESPONSE:
            return{
                ...state,
                savingProps: false,
                responseSave:true,
            };
        default:
            return state;
    }

}