Проследите, почему компонент React выполняет рендеринг

Существует ли системный подход к отладке того, что вызывает повторную визуализацию компонента в React? Я поместил простой console.log (), чтобы увидеть, сколько раз он рендерится, но у меня возникают проблемы с выяснением того, что вызывает рендеринг компонента несколько раз, т.е. (4 раза) в моем случае. Существует ли инструмент, который отображает временную шкалу и / или все компоненты дерева отображает и порядок?

Если вы хотите короткий фрагмент без каких-либо внешних зависимостей, я считаю это полезным

componentDidUpdate(prevProps, prevState) {
  Object.entries(this.props).forEach(([key, val]) =>
    prevProps[key] !== val && console.log(`Prop '${key}' changed`)
  );
  if (this.state) {
    Object.entries(this.state).forEach(([key, val]) =>
      prevState[key] !== val && console.log(`State '${key}' changed`)
    );
  }
}

Вот небольшой хук, который я использую для отслеживания обновлений компонентов функций

function useTraceUpdate(props) {
  const prev = useRef(props);
  useEffect(() => {
    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
      if (prev.current[k] !== v) {
        ps[k] = [prev.current[k], v];
      }
      return ps;
    }, {});
    if (Object.keys(changedProps).length > 0) {
      console.log('Changed props:', changedProps);
    }
    prev.current = props;
  });
}

// Usage
function MyComponent(props) {
  useTraceUpdate(props);
  return <div>{props.children}</div>;
}

Вот несколько примеров того, как компонент React будет перерисован.

• Рендеринг родительского компонента
• Вызов this.setState()внутри компонента. Это вызовет следующие составные методы жизненного цикла shouldComponentUpdate> componentWillUpdate> render>componentDidUpdate
• Изменения в компонентах props. Этот триггер будет componentWillReceiveProps> shouldComponentUpdate> componentWillUpdate> render> componentDidUpdate( connectметод react-reduxтриггера этого , когда есть изменения , применимые в магазине Redux)
• вызов, this.forceUpdateкоторый похож наthis.setState

Вы можете свести к минимуму повторное рендеринг вашего компонента, выполнив проверку внутри себя shouldComponentUpdateи вернув ее, falseесли в этом нет необходимости.

Другим способом является использование React.PureComponent компонентов без сохранения состояния. Чистые и не сохраняющие состояния компоненты повторно визуализируются только при наличии изменений в его реквизите.

Ответ @ jpdelatorre хорош в освещении общих причин, по которым компонент React может перерисовываться.

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

Реактивные компоненты пересчитывают каждый раз, когда получают новые реквизиты. Они могут получать новые реквизиты, такие как:

<MyComponent prop1={currentPosition} prop2={myVariable} />

или если MyComponentподключен к хранилищу резервов:

function mapStateToProps (state) {
  return {
    prop3: state.data.get('savedName'),
    prop4: state.data.get('userCount')
  }
}

В любое время значение prop1, prop2, prop3, или prop4изменения MyComponentбудут повторной визуализации. С 4 реквизитами не так сложно отследить, какие реквизиты меняются, поместив console.log(this.props)в этом начале renderблока. Однако с более сложными компонентами и все большим количеством реквизита этот метод несостоятельный.

Вот полезный подход ( для удобства использующий lodash ), чтобы определить, какие изменения реквизита вызывают повторный рендеринг компонента:

componentWillReceiveProps (nextProps) {
  const changedProps = _.reduce(this.props, function (result, value, key) {
    return _.isEqual(value, nextProps[key])
      ? result
      : result.concat(key)
  }, [])
  console.log('changedProps: ', changedProps)
}

Добавление этого фрагмента к вашему компоненту может помочь выявить виновника сомнительного повторного рендеринга, и много раз это помогает пролить свет на ненужные данные, передаваемые по компонентам.

Странно, никто не дал такого ответа, но я считаю его очень полезным, тем более что изменения в подпорках почти всегда глубоко вложены.

Крючки фанатов:

import deep_diff from "deep-diff";
const withPropsChecker = WrappedComponent => {
  return props => {
    const prevProps = useRef(props);
    useEffect(() => {
      const diff = deep_diff.diff(prevProps.current, props);
      if (diff) {
        console.log(diff);
      }
      prevProps.current = props;
    });
    return <WrappedComponent {...props} />;
  };
};

"Старые" школьные фанаты:

import deep_diff from "deep-diff";
componentDidUpdate(prevProps, prevState) {
      const diff = deep_diff.diff(prevProps, this.props);
      if (diff) {
        console.log(diff);
      }
}

PS Я все еще предпочитаю использовать HOC (компонент более высокого порядка), потому что иногда вы деструктурируете свои реквизиты сверху, и решение Джейкоба не подходит

Отказ от ответственности: Нет связи с владельцем пакета. Простое нажатие в десятки раз, чтобы попытаться обнаружить разницу в глубоко вложенных объектах, - это боль в.

Теперь есть доступ к этому на npm:

https://www.npmjs.com/package/use-trace-update

(Раскрытие, я опубликовал его) Обновление: Разработано на основе кода Джейкоба Раска

Использование хуков и функциональных компонентов, а не только изменение реквизита, может вызвать повторное рендеринг. Я начал использовать довольно ручной журнал. Я очень помог мне. Вы также можете найти это полезным.

Я вставляю эту часть в файл компонента:

const keys = {};
const checkDep = (map, key, ref, extra) => {
  if (keys[key] === undefined) {
    keys[key] = {key: key};
    return;
  }
  const stored = map.current.get(keys[key]);

  if (stored === undefined) {
    map.current.set(keys[key], ref);
  } else if (ref !== stored) {
    console.log(
      'Ref ' + keys[key].key + ' changed',
      extra ?? '',
      JSON.stringify({stored}).substring(0, 45),
      JSON.stringify({now: ref}).substring(0, 45),
    );
    map.current.set(keys[key], ref);
  }
};

В начале метода я держу ссылку на WeakMap:

const refs = useRef(new WeakMap());

Затем после каждого «подозрительного» звонка (реквизит, хук) пишу:

const example = useExampleHook();
checkDep(refs, 'example ', example);

Приведенные выше ответы очень полезны, на тот случай, если кто-то ищет конкретный метод для обнаружения причины повторного рендеринга, тогда я нашел эту библиотеку redux-logger очень полезной.

Что вы можете сделать, это добавить библиотеку и включить различие между состояниями (оно есть в документации), например:

const logger = createLogger({
    diff: true,
});

И добавьте промежуточное программное обеспечение в магазине.

Затем поместите console.log()в функцию рендеринга компонента, который вы хотите проверить.

Затем вы можете запустить свое приложение и проверить наличие консольных журналов. Где бы ни находился журнал непосредственно перед тем, как он покажет вам разницу между состоянием, (nextProps and this.props)вы можете решить, действительно ли необходим рендеринг.

Это будет похоже на изображение выше вместе с ключом diff.