Question

我目前正在实验React和Material-UI。

我有一个组件，其中包括另一个组件。在render()内部，我遍历了一个伪数组，该伪数组呈现了<FormDialog />组件。

  <ul>
     {tableContent.map((item, i) => 
       <li key={i}>{item.x}
          <FormDialog/>
      </li>
  )}
  </ul>

当使用REACT-TOOLS检查DOM时，我当然可以看到Dialog组件是其中的3倍。

我目前正在问自己这是否是不好的做法，在我将组件渲染20到50次左右时，在现实世界中会导致严重的性能问题。

如果这是一个问题

我真正喜欢的是Dialog组件开箱即用，不需要打开或关闭任何其他组件“动作”。因此，当这个示例不好的做法会给我带来很大的性能问题时，我看不到保持Dialog Component强大的自我一致性功能的选项。

这是对话框组件，只是从Material-UI演示中复制的：

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default class FormDialog extends React.Component {
  state = {
    open: false,
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Button variant="outlined" color="primary" onClick={this.handleClickOpen}>
          Open form dialog
        </Button>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="form-dialog-title"
        >
          <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
          <DialogContent>
            <DialogContentText>
              To subscribe to this website, please enter your email address here. We will send
              updates occasionally.
            </DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"
              label="Email Address"
              type="email"
              fullWidth
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleClose} color="primary">
              Subscribe
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

那么我要问你什么

1）我想知道我描述的内容是否不好，在实际示例中应避免使用

2）我需要哪些简单的方法来保持组件的自我一致性，而又正确的方式。我真的想避免在父组件中保持Dialog组件的打开状态。

循环中多次渲染对话框组件

0 个答案: