时间戳

首页 > 解决方案 > 渲染太多模态框会导致问题吗？

reactjs - 渲染太多模态框会导致问题吗？

问题描述

我正在尝试创建一个高性能和大规模的 react-redux 应用程序。问题是我有太多按钮，需要根据按下哪个按钮来显示相同​​的模式以不同的内容显示，并且每个按钮都有一个功能，只要它们相应的模式关闭，它就会运行。为此，我有两种方法

1) 使用类似“withModal HOC”的东西，它只是一个 HOC，在其中呈现模态（使用门户）并将该模态的控件作为道具传递给包装的组件。所以我可以用这个 HOC 包装每个按钮，但我认为如果此类按钮的数量非常大，这种方法可能会导致性能下降或内存问题。如果我对此有误，请纠正我

2) 在一个页面中使用单个全局模式，并通过按钮的 redux 操作更改其状态。但是，我不知道如何实现模态按钮的 onClose() 行为，因为我无法将函数存储在状态中。我可以使用 componentDidUpdate 来实现它，但它真的很hackish。

欢迎对此提出任何想法。

标签： reactjsreduxreact-reduxmodal-dialogmodalpopup

解决方案

我认为您的第二种方法非常简单且易于实施。

假设您在 index.js（或任何其他顶级组件）中包含以下代码 -

-------------------------------------------------- index.js

    import {useSelector} from 'react-redux'


    ....index...

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

    return (

      ...index...

     {modal && (
    <Modal>
      {modal === 'modal1' && <Modal1 />}
      {modal === 'modal2' && <Modal2 />}
    </Modal>

     ...
  )}

我在这里使用 {useSelector} react-redux 钩子，如果你不熟悉，它与 mapStateToProps 有点相同，并且具有“modal-root”id 的元素包装器对应于公共 Html 文件模态 div。

现在我们应该在商店创建 modalReducer -

-------------------------store/reducers/modalReducer.js

import initialState from '../initialState';

export const modalReducer = (state = initialState.modal, action) => {
switch (action.type) {
    case 'MODAL1':
        return 'modal1';
    case 'MODAL2':
        return 'modal2';
    case 'CLEAR_MODAL':
        return null
    default:
        return state;
 }
}

请注意，无论是在减速器还是在索引中，我都认为“模态”只是您的商店减速器之一，它在 rootReducer 中构成类似的东西

-----------------------------rootReducer.js

import { combineReducers } from 'redux';
import ...otherReducers...
import { modalReducer } from './modalReducer/modalReducer';


const rootReducer = combineReducers({
   ...otherReducers...
   modal: modalReducer,
 })

export default rootReducer

因为 index 中的 {state.modal} 指的是这个特定的减速器，并且减速器将 initialState.modal 作为乞求状态（如果你不想弹出任何东西，假设为 null）

现在我们需要做的最后一件事是调度动作

------------------------- ~store/modalActions.js

export const Modal1 = () => {
return (dispatch, getState) => {
    dispatch({
        type: 'MODAL1'
    })
}
}

export const modal2 = () => {
  return (dispatch, getState) => {
     dispatch({
        type: 'MODAL2'
    })
}
}

export const clearModal = () => {
 return (dispatch, getState) => {
    dispatch({
        type: 'CLEAR_MODAL'
    })
}

调用 clear dispatch 将关闭您的模式。如果你想在 onClose() 上做一些特定的事情，你可以使用 componentWillUnmount() 生命周期或 Modal.js 包装器中的 useEffect() 钩子来做到这一点。这是一些可选编码 - https://github.com/YogiHa/Hagai_Harari_17-11-2019/blob/master/src/components/Modal/Modal.js

希望它有帮助:)

推荐阅读