@qwead

React Render Performance?

Какими средствами можно отслеживать рендер react-компонентов?
В ручную каждому компоненту писать что-то подобное не удобно
render() {
    console.warn((this.name || this.displayName) + ' was rendered!');
    return (<div>...</div>);
}
  • Вопрос задан
  • 105 просмотров
Решения вопроса 2
vahe_2000
@vahe_2000
https://github.com/nitin42/react-perf-devtool/ новый для React Fiber
Ответ написан
Комментировать
rockon404
@rockon404 Куратор тега React
Frontend Developer
Можно так:
function withLog(WrappedComponent) {
  return class extends React.Component {
    displayName = WrappedComponent.displayName || WrappedComponent.name;
    
    componentDidMount() {
      console.log(`[${this.displayName}]: componentDidMount`);
    }

    ...

    render() {
      console.log(`[${this.displayName}]: render`);
      return <WrappedComponent {...this.props} />;
    }
  }
}

class MyComp extends React.Component {
  ...
}

const MyCompWithLog = withLog(MyComp);

Демо: https://jsfiddle.net/qg0cvjjs/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Else Ростов-на-Дону
от 150 000 до 200 000 ₽
SpectrumData Екатеринбург
от 120 000 до 180 000 ₽