如何防止在更新某些 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
    }

    //...
})