ReactJS正确使用有状态和无状态组件的方法吗？

Question

我已经开始学习ReactJS，并且对无状态和有状态组件有疑问。通常，我遵循如下所示的组件和容器分离方法。有状态功能在组件文件夹和容器文件夹下的其他逻辑操作中。folder structure

让我们思考重要的UI下拉列表。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

const useStyles = makeStyles(theme => ({
  button: {
    display: 'block',
    marginTop: theme.spacing(2),
  },
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
}));

export default function ControlledOpenSelect() {
  const classes = useStyles();
  const [age, setAge] = React.useState('');
  const [open, setOpen] = React.useState(false);

  const handleChange = event => {
    setAge(event.target.value);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const handleOpen = () => {
    setOpen(true);
  };

  return (
    <div>    
      <FormControl className={classes.formControl}>
        <InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
        <Select
          labelId="demo-controlled-open-select-label"
          id="demo-controlled-open-select"
          open={open}
          onClose={handleClose}
          onOpen={handleOpen}
          value={age}
          onChange={handleChange}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

为了打开和关闭下拉菜单，handleClose()和handleOpen()方法更改打开状态，这意味着它是有状态的组件。但是没有其他更改（忽略年龄设置）。看起来是可重用的组件，但是包含状态非常简单的操作（如打开和关闭）。我应该放入哪个文件夹？容器还是组件？

实际上超出了文件夹的选择范围，我可以将打开状态作为回调函数，将打开状态作为道具。但我认为在每个容器中执行此操作可能会过大，并且由于仅打开下拉列表（React.memo可以处理它，但在各处使用它似乎很奇怪），因此可以重新渲染父容器。

1-使用简单操作的正确方法是什么？在组件中提供功能或使用状态？

2-如果使用道具，渲染是否会因为其他所有组件渲染而导致性能问题？

提前感谢。

Answer 1

容器组件：

这些是执行繁琐逻辑的组件，主要是基于路由或（最好是繁琐的）逻辑。

功能组件：

这些功能可以小（或大）使用，但主要目的是它们可以在多个容器组件中使用，并且事件可能在其他功能组件中使用，功能组件的目的是信誉良好，它们保持某种状态（例如保持一个简单的钩子状态来跟踪您的情况下的切换）我可以说完全没问题

大多数时候，您会发现自己在Redux连接的路由级别上使用了容器组件（我也应该注意，现在不鼓励使用它）以及嵌套在子组件内部的许多其他功能组件。

以便回答您的​​问题，我可以这样说：

1. 对于简单的操作，您DO NOT必须在父级中保持状态组件并将其传递给您的功能组件，这导致您将道具大量传递给子组件并使项目维护变得非常棘手，并导致错误的代码，在子组件中包含简单状态完全没关系
2. 我想的不多，如果您只传递简单的道具...