Не вызывает ли подъем состояния в React ненужный повторный рендеринг?

Question

Я делаю простое приложение для заметок в React. Вот как это выглядит до сих пор:

Каждая заметка представляет собой компонент «Ячейка», который содержит внутренний элемент div для дополнительных дочерних компонентов ячейки. Приложение содержит div для панели навигации и div для заметок, а в div для заметок я визуализирую ячейки с помощью .map (). Заметки хранятся в состоянии приложения, как это ...

notes: [
        {
          contents: "Learn React",
          children: [
            {
              contents: "Finish tutorial series",
              children: []
            },
            {
              contents: "Do example project",
              children: []
            }
          ]
        },
        {
          contents: "Learn Redux",
          children: []
        },
        {
          contents: "Build note-taking app",
          children: []
        }
      ]

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

Моя проблема заключается в том, что каждый раз, когда пользователь изменяет заметку, которая изменяет соответствующую заметку в объекте заметок в состоянии приложения (ячейки имеют обработчик onBlur, переданный из приложения, которое передает идентификатор ячейки, и я затем выполняю поиск в объекте заметок этого идентификатора и изменения содержимого), и это приводит к повторному отображению всей страницы, так как состояние верхнего уровня изменилось. Разве это не разрушает всю цель React? Если весь компонент приложения будет перерисован при изменении его состояния, я думаю, что «поднятие состояния» до уровня приложения будет плохим, но похоже, что React поощряет это.

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

Answer 1

Ну, в общем, это и есть цель "виртуального DOM".Сначала React выполняет скрытое выполнение функции рендеринга без фактического построения ее на DOM.Он сравнивает этот виртуальный рендер с текущим, чтобы увидеть, есть ли какие-либо различия.

Когда реагирует, строит виртуальный DOM и видит, что он такой же, как и рендерившийся DOM, он не выполняет фактический рендеринг.

Так что манипулировать этим состоянием высокого уровня не так дорого, как вы думаете.

Тем не менее;Зачем вам управлять государством на таком высоком уровне?Как правило, плохо полагаться на глобальное состояние, и нет ничего очевидного в вашем компоненте, который, кажется, требует глобального состояния.Если вы можете держать вещи на месте, вам лучше!