PureRenderMixin w komponencie reagującym na ES6

Question

Czy istnieje sposób na dodanie mixina do komponentu klasy React ES6? (tj. extends React.Component)? Jeśli tak, jaki jest oficjalny sposób robienia tego?

Chciałbym dołączyć PureRenderMixin w jednym z moich komponentów, który ma niezmienny stan, aby przyspieszyć proces porównywania.

Answer 1

Są zazwyczaj dwa rozwiązania wstawek w ES6 stylu React klasy:

1. Tworzenie komponentu wyższego rzędu (np here)
2. Użyj dekorator jeśli” gotowi włączyć wczesne propozycje ES7 w Babel (np. here)

Ja właściwie nie trie d biblioteka, do której dołączyłem, na # 2, ale dekoratorzy uderzają mnie jako elegancki zamiennik dla mixinów.

Answer 2

Jeszcze nie, zgodnie z dokumentacją.

Źródło: http://facebook.github.io/react/docs/reusable-components.html#no-mixins

Answer 3

Używam react-mixin, jeśli chcę mieć mixy w moich składnikach reagujących na es6, ale nie wypróbowałem tej biblioteki z PureRenderMixin.

Answer 4

https://facebook.github.io/react/docs/shallow-compare.html

shallowCompare jest funkcja pomocnika, aby osiągnąć tę samą funkcjonalność jako PureRenderMixin podczas korzystania z klas ES6 React.

import shallowCompare from 'react-addons-shallow-compare'; 

export default class SampleComponent extends React.Component { 

    shouldComponentUpdate(nextProps, nextState) { 
    // pure render 
    return shallowCompare(this, nextProps, nextState); 
    } 

    render() { 
    return <div className={this.props.className}>foo</div>; 
    } 
} 

Source code od PureRenderMixin jest:

var ReactComponentWithPureRenderMixin = { 
    shouldComponentUpdate: function(nextProps, nextState) { 
    return shallowCompare(this, nextProps, nextState); 
    }, 
}; 

Więc, kiedy użyć PureRenderMixin, faktycznie korzysta shallowCompare

UPDATE 15.3.0:

Dodaj React.PureComponent - nowa klasa podstawowa do rozszerzenia, zastępująca react-addons-pure-render-mixin teraz, gdy mixiny nie działają z klasami ES2015.