Метод react render, вызываемый каждый раз, когда родительские rerenders

Question

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

Это нормальное поведение? Я думал, что компонент только реверсирует, если владелец отправляет в новые реквизиты, то есть реквизиты меняются, имеют разные значения или некоторые внутренние изменения состояния.

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

Answer 1

Все дело в том, чтобы использовать Virtual DOM над фактическим DOM. render() в вашем компоненте React Component используется для вычисления нового VD, сравнения его с предыдущим и применения diff к AD. И есть разница между, например, React.DOM.div и ваш компонент в методе render() другого компонента - React необходимо вычислить VD вашего компонента - очевидно, из-за его метода render() - даже если никаких реквизитов не было.

Однако вы можете явно указать React Component, если он вызывает метод render() или нет - с помощью крюка shouldComponentUpdate(). В React.createClass() записи вы можете использовать PureRenderMixin, что нет ничего, кроме следующей инъекции коды:

import shallowEqual from 'react/lib/shallowEqual'; 

shouldComponentUpdate(nextProps, nextState) { 
    return !shallowEqual(nextProps, this.props) || !shallowEqual(nextState, this.state); 
} 

Есть несколько способов сделать это в ES6 записи - например, наследование от PureRenderComponent, которое содержит вышеуказанный крючок.

См. Также https://facebook.github.io/react/docs/advanced-performance.html