为什么未在React JS组件中调用构造函数

Question

我正在尝试从页面调用组件，但是未调用该组件中的构造函数。在该代码中，我正在组件中传递状态值，因此，当此时状态值发生变化时，将调用render方法，它将调用组件。但是，当调用组件构造函数时，不会调用。

const React = require("react");
import { withStyles } from "@material-ui/core/styles";

import Dialog from "@material-ui/core/Dialog";
import DialogContentText from "@material-ui/core/DialogContentText";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
import DialogActions from "@material-ui/core/DialogActions";
import MuiDialogTitle from "@material-ui/core/DialogTitle";
import MuiDialogContent from "@material-ui/core/DialogContent";

import TodoForm from "../components/TodoForm";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import CloseIcon from "@material-ui/icons/Close";
import { Fragment } from "react";

import PropTypes from "prop-types";

const styles = theme => ({
  elementpadding: {
    paddingRight: 10,
    width: 150
  },
  button: {
    marginRight: 5,
    marginTop: 10
  }
});

const DialogTitle = withStyles(theme => ({
  root: {
    borderBottom: `1px solid ${theme.palette.divider}`,
    margin: 0,
    padding: theme.spacing.unit * 2
  },
  closeButton: {
    position: "absolute",
    right: theme.spacing.unit,
    top: theme.spacing.unit,
    color: theme.palette.grey[500]
  }
}))(props => {
  const { children, classes, onClose } = props;
  return (
    <MuiDialogTitle disableTypography className={classes.root}>
      <Typography variant="h6">{children}</Typography>
      {onClose ? (
        <IconButton
          aria-label="Close"
          className={classes.closeButton}
          onClick={onClose}
        >
          <CloseIcon />
        </IconButton>
      ) : null}
    </MuiDialogTitle>
  );
});

const DialogContent = withStyles(theme => ({
  root: {
    margin: 0,
    padding: theme.spacing.unit * 2
  }
}))(MuiDialogContent);

class TodoInlineForm extends React.Component {
  state = {
    open: false,
    fullWidth: true,
    maxWidth: "md"
  };
  constructor(props) {
    super(props);
  }

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

  handleClickTodoInlineFormOpen = name => event => {
    this.setState({
      open: true
    });
  };

  render() {
    const { classes, theme } = this.props;
    return (
      <Dialog
        open={this.state.open}
        onClose={this.handleClose}
        aria-labelledby="max-width-dialog-title"
      >
        <DialogTitle id="customized-dialog-title" onClose={this.handleClose}>
          Add Todo
        </DialogTitle>
        <DialogContent>
          <TodoForm flag="timetracker" closeTodoForm={this.handleClose} />
        </DialogContent>
      </Dialog>
    );
  }
}

export default withStyles(styles, { withTheme: true })(TodoInlineForm);