防止在特定道具更改时重新绘制

Question

我有一个可重复使用的组件，它采用了可以从外部切换的editable道具。问题是，每当该切换被激活时，整个组件都会重新调用，包括只应调用一次的API调用。如果特定道具editable发生更改，我该如何预防和重新发布？或者解决这个问题的方法是什么？

我希望获得的是，无论editable属性更改多少次，在组件中只获得一次API调用。我怎样才能做到这一点？

以下代码：

export const EditableTableList: React.FC<EditableTableListProps> = React.memo(({ columns, editEnabled, keyName, getData, sendChangeToParent }) => {
...
// THIS RERENDERS EVERYTIME EDITABLE CHANGES
useEffect(() => {
const getTableData = async () => {
setLoadedData(false);
setOriginalData(await getData());
setLoadedData(true);
}
getTableData();
}, [getData]);
...
}

Answer 1

getData((将在每次父组件时重新渲染。您可以将其作为useCallback函数表达式发送，这样即使父组件重新渲染，它也会保留相同的标识。

Answer 2

效果再次执行只是因为getData函数正在更改——可能不是它的内容，但肯定是实例/引用。

您必须将其存储在父组件中，例如使用useCallback。如果您提供父组件，我可以给您举一个例子。

Answer 3

通过从dependency数组中删除getData，可以解决问题。但要回答这个问题：

当特定道具更改时防止重新渲染

您可以通过以下方式解决此问题。

function Hello() {
return <div>component code goes here</div>
}
export default React.memo(Hello, (oldProps, newProps) => {
return oldProps.prop1 !== newProps.prop1;
})