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

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 mutation(更改服务器上数据的状态。此数据的后续重新获取也会重新呈现此组件。这取决于您最终要实现的目标。