与 shouldComponentUpdate 一起使用时 react-native-draggable-flatlist 拖放重置答案

【问题标题】：react-native-draggable-flatlist drag/drop reseting when used with shouldComponentUpdate与 shouldComponentUpdate 一起使用时 react-native-draggable-flatlist 拖放重置
【发布时间】：2020-06-19 09:02:07
【问题描述】：

我正在开发一个 react-native 应用程序，我在其中一个列表中使用 react-native-draggable-flatlist，不幸的是，我必须在组件中使用 shouldComponentUpdate 来处理来自另一个组件上的其他列表项的数据，但是添加 shouldComponentUpdate 后，我的拖放不起作用，我可以拖放，但它会立即将整个列表重置为原始定位设置。

请帮助我提出一些建议，以使拖放与 shouldComponentUpdate 一起工作，因为我不想破坏现有功能

代码

<DraggableFlatList
 scrollPercent={5}
 data={testData}
 renderItem={this.renderItem}
 keyExtractor={item => `item-${testkey}`}
 onMoveEnd={({ data }) => {
   this.setState({ data });
 }}
/>

public shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.data.length !== nextState.data.length) {
     this.setState({
       data: nextProps.data
     })
   }
   return true
}

【问题讨论】：

标签： javascript react-native user-interface react-redux react-native-draggable-flatlist

【解决方案1】：

shouldComponentUpdate 不适用于执行副作用。它用于减少渲染计数以提高道具更改以提高性能。 shouldComponentUpdate 应该返回 true 或 false 来确定组件是否应该重新渲染。

shouldComponentUpdate

您可以使用 componentDidUpdate 在 prop 更改反射后触发或 componentWillReceiveProps 在 prop 反射之前触发

我建议使用componentDidUpdate 喜欢

componentDidUpdate  = (prevProps, prevState) => {
  if (this.props.data.length !== this.state.data.length) {
     this.setState({
       data: nextProps.data
     })
   }

}

【讨论】：

【解决方案2】：

您不应该为此目的使用shouldComponentUpdate。如果您只是将props.data 复制到state.data，为什么不直接使用props.data？

如果绝对有必要在每次更新时进行复制，那么请考虑使用另一种生命周期方法，例如 componentDidUpdate 或 getDerivedStateFromProps。您也可以使用componentWillReceiveProps，但它已被弃用，应避免使用。

【讨论】：