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

Question

Я новичок, чтобы реагировать, и я застрял из-за очень многих состояний, которые должны быть преобразованы в хуки, а некоторые должны быть обновлены, пожалуйста, помогите. Мне нужно использовать функции реакции, чтобы работать с реагировать с избыточностью.

const localizer = momentLocalizer(moment);


class BigCalendar extends Component {

    state = {
        events: [{
            id: 2,
            title: 'DS STARTS',
            start: new Date(2016, 2, 13, 0, 0, 0),
            end: new Date(2016, 2, 20, 0, 0, 0),
        }],


    };

    constructor() {
        super();
        const now = new Date();
    };

    componentDidMount() {

        current().then((data)=>{

        });

        listEvents().then((data) => {


             const events=data;
             this.state = {
                 name: 'React',
                 events,
                 messages: messages,

             };

             this.setState({
                 events:[
                     ...this.state.events,
                     data
                 ]
             })
        });
    }
    handleSelect = ({start, end}) => {
        const title = window.prompt('New Event name');
        if (title) {
            this.setState({
                events: [
                    ...this.state.events,
                    {
                        start,
                        end,
                        title,
                        id: this.id,
                    },
                ],
            });
            createEvent({id: "some id", title: title, start: start, end: end});
        }
    };

    render() {
        return (
            <div>
                <p>
                    A test for the React Big Calendar.
                </p>
                <div style={{height: '500pt'}}>
                    <Calendar
                        events={this.state.events}
                        startAccessor="start"
                        endAccessor="end"
                        selectable
                        onSelectSlot={this.handleSelect}
                        defaultDate={moment().toDate()}
                        localizer={localizer}
                    />
                </div>
            </div>
        );
    }
}
export default BigCalendar;

Я получил состояние, которое необходимо обновить после нажатия в bigCalendar. Я прочитал так много статей, но я был ошеломлен количеством состояний, которые нужно обновить

Answer 1

Когда у вас есть несколько фрагментов данных, которые необходимо сохранить в состоянии, вы можете использовать несколько useState хуков (по одному для каждого значения состояния):

const [id, setId] = useState(2);
const [title, setTitle] = useState('DS STARTS');
// ...

или вы можете использовать один со значением объекта:

const [event, setEvent] = useState({
  id: 2,
  title: 'DS STARTS',
  // ...

Вообще говоря, лучше сделать первое, потому что тогда, когда несвязанные данные изменяются, вы не рендеритесь без необходимости. Но это относится только к несвязанным данным: если все данные концептуально связаны, то сохранение их в одном и том же объекте может иметь смысл.

Например, если у вас есть foo и bar с вложенными компонент A, зависящий от foo, и подкомпонент B, зависящий от bar и изменений foo, bar будут перерисованы (хотя только в виртуальном DOM, при условии, что он возвращает тот же JSX) ... если вы используете один объект состояния для обоих. Если они являются отдельными состояниями, хотя обновление одного не повлияет на компоненты, зависящие от другого.

(Но, опять же, ничего из этого не имеет значения, если и A, и B зависят от обоих foo и bar, ie. если данные подключены.)

Кроме того, со значениями объекта вы можете сделать foo.baz = 5 ... и забыть, что не будет вызывать повторную визуализацию (у вас есть делать setFoo({...foo, baz: 5})). У необъектов такой проблемы нет.

Также лично я чувствую, что использование отдельных useState хуков чище на человеческом уровне, потому что тогда это действительно делает "переменные состояния" более похожими на обычные переменные, в смысл «один на концептуальную часть информации».

PS Если у вас сложное приложение, у вас много состояний: нет способа «решить» это. Но если ваша проблема заключается в необходимости передавать много значений состояний между вашими компонентами, вам следует ознакомиться с контекстом в React, поскольку он предназначен для решения этой проблемы.