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的调用中，以在某些情况下通过记忆结果来提高性能” react.memo

虽然您没有更改传入的道具，但您正在更改状态

侧面说明：我想如果要更改此值，您可能还希望通过某种方式（REST POST / graphql突变）来更改服务器上数据的状态。随后重新获得此数据也将重新呈现此组件。这取决于您要最终实现的目标。

React功能组件中的复选框导致重新呈现

1 个答案: