реакция перетаскивания / перетаскивания при перетаскивании при использовании с shouldComponentUpdate

Question

Я работаю над собственным приложением реакции, в котором я использую реагирующий собственный перетаскиваемый плоский список для одного из списка, и, к сожалению, я должен использовать 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
}

Answer 1

Вы не должны использовать shouldComponentUpdate для этой цели. Если вы просто копируете props.data в state.data, почему бы просто не использовать props.data напрямую?

Если абсолютно необходимо, чтобы вы выполняли копирование при каждом обновлении, тогда рассмотрите возможность использования другого метода жизненного цикла, такого как componentDidUpdate или getDerivedStateFromProps. Вы также можете использовать componentWillReceiveProps, но оно устарело и его следует избегать.

Answer 2

shouldComponentUpdate не предназначен для выполнения sideEffects. Он используется для уменьшения количества рендеров при изменениях реквизита для повышения производительности. shouldComponentUpdate должен возвращать true или false, определяя, должен ли компонент перерисовываться.

shouldComponentUpdate

Вы можете использовать componentDidUpdate, который срабатывает после отражения изменений в пропиле, или componentWillReceiveProps, который срабатывает до отражения пропа,

Я рекомендую использовать componentDidUpdate как

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

}