React vs Angular: медленный рендеринг с React

Я удивлен, что никто не упомянул PureRenderMixin. Он реализует shouldComponentUpdate, поэтому вам не нужно беспокоиться об этом.

Кроме того, мне интересно, будет ли React Performance Tools что-то полезное?

И я удивлен, услышав, что Angular быстрее, чем React после просмотра этого разговора от Ryan Florence.

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

Позволяет получить более подробную информацию:

Хотя Angular vs React различий много, они могут делать то же самое, а именно строить клиентский интерфейс. Оба имеют свое место. Для тех народов, которым нравится веб-разработка, прежде всего интересен инновационный подход AngularJS к HTML.

AngularJS действительно представляет собой полную структуру, а не только библиотеку, как ReactJS, но ReactJS имеет лучшую производительность, чем AngularJS, путем внедрения виртуального DOM. По нашему мнению, вы должны использовать AngularJS, если:

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

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

Это пример, когда все, что меняется, - это один вывод данных. Не исключено, что Angular двусторонняя привязка данных просто предлагает более быструю повторную визуализацию, когда все, что меняется, - это отображение связанных данных.

Реакция не обещает, что ее рендеринг быстрее, чем любая другая структура при любых обстоятельствах. То, что он предлагает, - это возможность очень эффективно обрабатывать ~ произвольно сложные DOM-обновления и предлагать различные методы жизненного цикла (например, componentWillReceiveProps, componentDidUpdate, в дополнение к вышеупомянутому shouldComponentUpdate), чтобы вы могли запускать обратные вызовы этих событий и контролировать, как и если они должны произойти. Здесь очень мало оптимизировать, потому что все, что вы делаете, это изменение 2000 текстовых дисплеев.

edit: Чтобы уточнить, React полезен при выполнении более сложных манипуляций DOM, поскольку он виртуальный алгоритм DOM позволяет ему выбирать минимальный набор операций DOM, необходимых для обновления вашей DOM. Это еще много работы, когда все, что должно произойти, - это 2000 экземпляров некоторых изменений текста.

В компоненте React, как только вы вызываете setState, он немедленно вызовет функцию рендеринга. React отметит этот компонент как грязный и будет повторно отображать все дочерние элементы внутри этого компонента.

Он не будет отображать все Native-элементы DOM из-за виртуальной DOM, поэтому он все равно будет создавать новые экземпляры своих дочерних ReactElements, что может привести к дополнительной стоимости памяти Javascript.

Чтобы избежать этой проблемы, вам нужна функция mustComponentUpdate, которая реализована в классе компонентов. он будет выполнен до метода Render. Если вы обнаружите, что сейчас ничего не изменилось, например, в вашем примере, вы меняете state.locale. Вы можете определенно подумать, что этот компонент не нуждается в обновлении. поэтому просто верните false, чтобы предотвратить вызов рендеринга.

Это базовое решение для решения проблем производительности React. Попытайтесь добавить "shoudlComponentUpdate" в свой Компонент Numbers, чтобы избежать тонкости повторного рендеринга элементов

В этом конкретном случае вам нужно знать, что государство стекает вниз, а также обновляет DOM. То, что вы хотите сделать, это создать компонент Price, который сохраняет локаль в своем собственном состоянии и получает сигнал (т.е. Канал или поток), чтобы изменить локаль, а не посылать языковой опоре полностью вниз. Идея состоит в том, что вам не нужно обновлять весь компонент Numbers, только цены внутри. Компонент может выглядеть так:

var Price = React.createClass({
    mixins: [ReactIntlMixin],
    componentDidMount: function() {
        subscribeToLocal(this.onLocaleChange);
    },
    onLocaleChange: function(newLocales) {
        this.setState({locales: newLocales});
    },
    render: function() {
        return <span>this.formatNumber(this.props.number, this.state.locales, {style: 'currency', currency: 'USD'})</span>
    }
});

Спасибо всем за участие. React vs Angular - самый актуальный вопрос в настоящее время.

Что вы предпочитаете использовать Angular, Vue.js, Node.js или React? Все зависит от характеристик проекта, который вы разрабатываете.

Когда хорошим выбором может быть Angular, а не React или Vue?

В случае, если вы обладаете глубокими знаниями в TypeScript, с прочной основой в объектно-ориентированном программировании (ООП). В разработке надежных и хорошо структурированных приложений.

Когда целесообразно использовать React вместо Angular или Vue?

Рекомендуется, когда у вас есть базовые знания TypeScript. Вы хотите создавать отличные гибкие приложения. React предоставляет большое количество пакетов для разных целей и легко интегрируется с другими библиотеками.

Когда предлагается выбрать Vue по сравнению с Angular или React?

Vue является отличным выбором для проектов или небольших групп программирования. Его кривая обучения намного легче для тех, кто начинает.

Эти две статьи показывают всеобъемлющий сравнительный анализ с точки зрения:

Сравнение между React, Angular и Vue - Часть I

Сравнение между React, Angular и Vue - Часть II