Реагировать на собственную утечку памяти

Question

Использование памяти моих приложений увеличивается на 0,1 МБ примерно каждые 3 секунды, и я ничего не делаю в приложении. Я позаботился о том, чтобы удалить все прослушиватели событий, так что это не проблема. Есть ли инструмент для проверки того, какие процессы записывают в оперативную память, или каким-либо другим способом обнаружения этой утечки?

Answer 1

Это мой обходной путь:

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const TOSS_SEC = 0.2;
const MULTIPLIER = Math.round(SCREEN_WIDTH / 90);

class ReanimatedFlatList extends React.Component {
  constructor(props) {
    super(props);
    // drag Distance
    const dragX = new Value(0);
    // gesture state
    const state = new Value(-1);
    // drag velocity
    const dragVX = new Value(0);
    this.onGestureEvent = event([
      { nativeEvent: { translationX: dragX, velocityX: dragVX, state: state } },
    ]);
    this.transX = new Value();
    const prevDragX = new Value(0);
    const clock = new Clock();
    const snapPoint = cond(
      lessThan(add(this.transX, multiply(TOSS_SEC, dragVX)), -80),
        -100,
        0,
    );
    this.unconstrainedX = cond(
      eq(state, State.ACTIVE),
      [
        stopClock(clock),
        set(this.transX, add(this.transX, sub(dragX, prevDragX))),
        set(prevDragX, dragX),
        this.transX,
      ],
      [
        set(prevDragX, 0),
        set(
          this.transX,
          cond(
            defined(this.transX),
            runSpring(clock, this.transX, dragVX, snapPoint),
            0,
          ),
        ),
      ],
    );
    this.translateX = interpolate(this.unconstrainedX, {
      inputRange: [-100, 0],
      outputRange: [-100, 0],
      extrapolate: Extrapolate.CLAMP,
    });
  }
  render() {
    return (
      <React.Fragment>
        <Animated.View style={{ transform: [{ translateX: this.translateX }] }}>
          <FlatList />
        </Animated.View>
        <PanGestureHandler
          maxPointers={1}
          onGestureEvent={this.onGestureEvent}
          onHandlerStateChange={this.onGestureEvent}>
        <Animated.View
          style={{
            transform: [{ translateX: multiply(this.translateX, MULTIPLIER) }],
            position: 'absolute',
            top: 0,
            width: SCREEN_WIDTH,
            right: -SCREEN_WIDTH + 50,
            bottom: 0,
          }}
        />
      </PanGestureHandler>
    </React.Fragment>
  );
 }
}

Это позволяет мне переместить FlatList 100 pt влево и отобразить рядом с ним что-то похожее на навигационный ящик. Это решение не идеально, потому что вы не сможете прокручивать между SCREEN_WIDTH - 50 пунктов и SCREEN_WIDTH по оси x, но я не нашел лучшего решения на данный момент.

Answer 2

Я обнаружил утечку памяти, это была проблема с обработчиком реакции-нативного жеста, я сделал это:

<PanGestureHandler
  onGestureEvent={this.onGestureEvent}
  onHandlerStateChange={this.onGestureEvent}>
  <Animated.View style={{ transform: [{ translateX: this.translateX }] }}>
     <FlatList />
  </Animated.View>
</PanGestureHandler>

Я не думал о том, что будет жестобработчик перед всем FlatList, который в моем случае содержит более 200 элементов. Я до сих пор не понимаю, почему использование памяти увеличивается, не делая ничего, но я решил эту проблему.