反应功能组件中的复选框导致重新渲染

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

如果您更新组件将重新渲染的状态，这就是 react 的基本工作方式。记忆的data 属性来自组件外部。

“如果你的函数组件在给定相同的 props 的情况下呈现相同的结果，你可以将它封装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能”react.memo

你并没有改变传入的道具，你改变了状态

旁注：我想在更改此值时，您可能还希望通过某种方式（REST POST / graphql 突变）更改服务器上数据的状态。此数据的后续重新获取也将重新渲染此组件。这取决于您最终要达到的目标。