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

Question

我已经开始学习ReactJS，有一个关于无状态和有状态组件的问题。一般来说，我遵循组件和容器的分离，如下所示。有状态函数在组件文件夹中，其他逻辑操作在容器文件夹下。文件夹结构

让我们思考材料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()方法更改打开状态，这意味着它是有状态组件。但没有其他变化（省略年龄设置）。它似乎是可重用的组件，但包括状态与非常简单的操作，如打开和关闭。我应该放入哪个文件夹？容器还是组件？

Answer 1

这些组件执行繁重的逻辑，并且主要是基于路由的，或者（更好地说是基于繁重的）基于逻辑的。

这些函数可以很小（也可以很大），但主要目的是它们可以在几个容器组件中使用，事件可以在其他函数组件中使用，函数组件的目的是信誉，如果它们保持某种状态（就像在您的情况下保持一个简单的钩子状态来跟踪切换），我可以说完全可以

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

null