Флажок в реагирующем функциональном компоненте вызывает перерисовку

Question

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

вот код

    const BikePage = React.memo(({ data }) => {
      console.log("page data", data)

      const [selectedColor, setColor] = useState(data.bike.color[0])

      const onColorChange = e => {
        setColor(e.target.value)
      }

      return (
<div>
    {data.treatment.price.map((value, index) => {
                          return (
                            <div>
                              <input
                                id={`bike-option-${index}`}
                                name="treatment"
                                type="radio"
                                value={value}
                                checked={selectedColor === value}
                                onChange={e => onColorChange(e)}
                              />
                              <label
                                htmlFor={`treatment-option-${index}`}
                              >
                                {value}
                              </label>
                            </div>
                          )
                        })}
      <Link
                      to="/book"
                      state={{
                        bike: `${data.bike.title}-${selectedColor}`,
                      }}
                      className="c-btn"
                    >
                      Book Now
                    </Link>
</div>
      )

    });

Answer 1

Если вы обновите состояние, которое будет перерисовывать компонент, это в основном то, как работает реакция. запомнившаяся data опора идет из-за пределов компонента.

"Если ваш функциональный компонент выдает тот же результат при одинаковых опорах, вы можете заключить его в вызов React.memo для повышения производительности вв некоторых случаях, запоминая результат " реаги.мемо

Вы не меняете входящие реквизиты, но вы меняете состояние

Примечание: я представляю, чтопри изменении этого значения вы, вероятно, захотите изменить состояние данных на сервере также с помощью некоторых средств (REST POST / graphql mutation). Последующие повторные загрузки этих данных также будут повторно отображать этот компонент. Это зависит от того, чего вы пытаетесь достичь.