ReactJS правильный способ использования компонентов с сохранением состояния и без него?

Question

Я начал изучать ReactJS и у меня возник вопрос о компонентах без состояния и с состоянием. Обычно я следую за разделением компонентов и контейнеров, как показано ниже. Функции с состоянием находятся в папке компонентов, а другие операции logi c в папке контейнера. структура папок

Давайте рассмотрим раскрывающийся список пользовательского интерфейса материала.

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

Лучше использовать новые функции, реагировать и контексты в функциональном компоненте, чем использовать компонент на основе классов или запросить компонент с состоянием или без состояния

Answer 2

контейнерный компонент:

это компоненты, которые выполняют тяжелую логику c и в основном основаны на маршруте или (лучше сказать, тяжелом) логи c.

функциональные компоненты:

эти функции пригодны для использования небольшими (или могут быть большими), но основное назначение заключается в том, что они могут использоваться в нескольких компонентах контейнера, а событие может быть в других компонентах функции, целью компонентов функции является репутация, если они удерживают некоторое состояние (например, удержание простого состояния перехвата для отслеживания переключения в вашем случае) я могу сказать, что все в порядке

большую часть времени вы обнаружите, что используете компоненты контейнера на уровне маршрута с подключенным Redux ( Также я должен отметить, что это не рекомендуется в наши дни) и многие другие функциональные компоненты, вложенные в ваши подкомпоненты.

поэтому, чтобы ответить на ваши вопросы, я могу сказать, что:

1. для простые операции, вам НЕ необходимо хранить состояние в родительском компоненте
   и передавать его в свой функциональный компонент, это приводит к тому, что вы передаете много реквизитов дочерним компонентам и усложняете обслуживание проекта и приводите к плохому коду; вполне нормально хранить простые состояния в подкомпонентах
2. я думаю, что не так уж много , если вы только передаете простой реквизит ...