如何防止在更新firestore文档时重新加载整个组件?

Question

我正在尝试建立一个拖放待办事项列表…在firebase中更新每个元素的每次拖放位置后…这是函数做的

unfinishedTodos.forEach((each, index) => {
firebaseApp.firestore().collection("todos").doc(each.id).update({
index: index})
});

但是在更新功能运行后，整个组件正在重新加载..问题是，由于列表中有很多项目，我必须再次滚动以找到我正在使用的项目…我想确保firestore文档得到更新，但页面不应该重新加载…我怎样才能防止这种重新加载?更新:我发现哪里出了问题……实际上我使用的是firebase的onSnapshot功能…因此，每次更改它都会被触发并重新加载数据…

Answer 1

当任何state或props变量发生变化时，React都会更新组件。

所以，为了防止有条件的重新渲染，你可以使用这个生命周期函数(返回false意味着避免重新渲染):

类组件

shouldComponentUpdate(prevState, prevProps) {
if (this.state.someVariable !== prevState.someVariable || 
this.props.someVariable !== prevProps.someVariable) {
return false;
}
return true;
}

功能组件

React.memo(MyComponent, (props, nextProps)=> {
if(this.state.someVariable !== prevState.someVariable) {
// if don't re-render/update
return true
}
//...
})