ReactPerformanceIssyntacticsugarsosweet?

HowdoesReactwork?

2

HowdoesReactwork?

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) } }

3

HowdoesReactwork?

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) } }

3

HowdoesReactwork?

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) } }

3

HowdoesReactwork?

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) } }

3

HowdoesReactwork?

varAvatar=function(_Component){ _inherits(Avatar,_Component);

functionAvatar(){ _classCallCheck(this,Avatar);

return_possibleConstructorReturn(this,(Avatar.__proto__|| Object.getPrototypeOf(Avatar)).apply(this,arguments)); }

_createClass(Avatar,[{ key:"render", value:functionrender(){ returnReact.createElement( "img", _extends({src:"./public/avatar.png"}, this.props) ); } }]);

4

ReactPerftool

5

ReactPerftool 6

ReactPerftool

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) }}

7

ReactPerftool

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) }}

7

ReactPerftool

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) }}

7

ReactPerftool

classAvatarextendsComponent{ render(){ return( <imgsrc="./public/avatar.png"{...this.props}/> ) }}

7

Styling

8

Styling

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

9

Styling

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

classStylingextendsPureComponent{ render(){ return<Avatarstyle={{width:'100px'}}/> } }

9

Styling

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

classStylingextendsPureComponent{ render(){ return<Avatarstyle={{width:'100px'}}/> } }

9

Styling

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

10

Styling

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

conststyle={width:'100px'} classStylingFixedextendsPureComponent{ render(){ return<Avatarstyle={style}/> } }

10

Styling

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

conststyle={width:'100px'} classStylingFixedextendsPureComponent{ render(){ return<Avatarstyle={style}/> } }

10

Inlinehandler

11

Inlinehandler

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

12

Inlinehandler

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

classInlineHandlerextendsPureComponent{ render(){ return<AvataronClick={()=>{this.setState({clicked:true})}}/> } }

12

Inlinehandler

classAvatarextendsPureComponent{ render(){ return<imgsrc="./public/avatar.png"{...this.props}/> } }

classInlineHandlerextendsPureComponent{ render(){ return<AvataronClick={()=>{this.setState({clicked:true})}}/> } }

12

InlinehandlervarInlineHandler=function(_PureComponent){ _inherits(InlineHandler,_PureComponent);

functionInlineHandler(){ _classCallCheck(this,InlineHandler);

return_possibleConstructorReturn(this,(InlineHandler.__proto__|| Object.getPrototypeOf(InlineHandler)).apply(this,arguments)); }

_createClass(InlineHandler,[{ key:"render", value:functionrender(){ var_this2=this;

returnReact.createElement( "div", null, React.createElement(Avatar,{onClick:functiononClick(){ _this2.setState({clicked:true}); }}) ); } }]);

returnInlineHandler;}

13

Inlinehandler

classInlineHandlerFixedextendsPureComponent{ constructor(props,context){ super(props,context); this.handleClick=this.handleClick.bind(this) }

handleClick(){ this.setState({ clicked:true }) } render(){ return<AvataronClick={this.handleClick}/> }}

14

Inlinehandler

classInlineHandlerFixedextendsPureComponent{ constructor(props,context){ super(props,context); this.handleClick=this.handleClick.bind(this) }

handleClick(){ this.setState({ clicked:true }) } render(){ return<AvataronClick={this.handleClick}/> }}

14

Composition

15

Composition

classSelectextendsPureComponent{ render(){ return( <div> {this.props.children} </div> ) }}

classOptionextendsPureComponent{ render(){ return( <span>{this.props.title}</span> ) }}

16

CompositionclassCompositionextendsPureComponent{ handleUpdate=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> <Select> <Optiontitle="Title1"/> <Optiontitle="Title2"/> <Optiontitle="Title3"/> <Optiontitle="Title4"/> <Optiontitle="Title5"/> </Select> </div> ); }}

17

CompositionclassCompositionextendsPureComponent{ handleUpdate=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> <Select> <Optiontitle="Title1"/> <Optiontitle="Title2"/> <Optiontitle="Title3"/> <Optiontitle="Title4"/> <Optiontitle="Title5"/> </Select> </div> ); }}

17

CompositionclassWrappedSelectextendsPureComponent{ staticpropTypes={ options:PropTypes.array }

render(){ return( <Select> { this.props.options.map((option)=>( <Optionkey={option}title={option}/> )) } </Select> ) }}

18

CompositionclassCompositionFixedextendsPureComponent{ constructor(props,context){ super(props,context) this.state={ options:["Title1","Title2","Title3","Title4","Title5"] } }

handleUpdate=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> <WrappedSelectoptions={this.state.options}/> </div> ) }}

19

CompositionclassCompositionFixedextendsPureComponent{ constructor(props,context){ super(props,context) this.state={ options:["Title1","Title2","Title3","Title4","Title5"] } }

handleUpdate=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> <WrappedSelectoptions={this.state.options}/> </div> ) }}

19

ConditionalRendering

20

ConditionalRenderingclassConditionalRenderingextendsPureComponent{ constructor(props,context){ super(props,context); this.state={list:range(1,100000)} }

handleUpdate=()=>{this.forceUpdate()}

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> { this.state.list.map((item)=>( <h1key={item}>{item}</h1> )) } </div> ) }}

21

ConditionalRenderingclassConditionalRenderingextendsPureComponent{ constructor(props,context){ super(props,context); this.state={list:range(1,100000)} }

handleUpdate=()=>{this.forceUpdate()}

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> { this.state.list.map((item)=>( <h1key={item}>{item}</h1> )) } </div> ) }}

21

ConditionalRenderingclassListextendsPureComponent{ staticpropTypes={ list:PropTypes.array } render(){ return( <div> { this.props.list.map((item)=>( <h1key={item}>{item}</h1> )) } </div> ) }}

22

ConditionalRenderingclassConditionalRenderingFixedextendsPureComponent{ constructor(props,context){ super(props,context);

this.state={list:range(1,100000)} }

handleUpdate=()=>{this.forceUpdate()}

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> <Listlist={this.state.list}/> </div> ) }}

23

ConditionalRenderingclassConditionalRenderingFixedextendsPureComponent{ constructor(props,context){ super(props,context);

this.state={list:range(1,100000)} }

handleUpdate=()=>{this.forceUpdate()}

render(){ return( <div> <buttononClick={this.handleUpdate}>Update</button> <Listlist={this.state.list}/> </div> ) }}

23

ConstComponent

24

ConditionalRenderingclassConstComponentextendsPureComponent{

handleClick=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleClick}>Update</button>

<Constvalue={1}/> <Constvalue={1}/> <Constvalue={1}/> ...10000... </div> ) }}

25

ConditionalRenderingclassConstComponentextendsPureComponent{

handleClick=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleClick}>Update</button>

<Constvalue={1}/> <Constvalue={1}/> <Constvalue={1}/> ...10000... </div> ) }}

25

ConditionalRenderingconstcomponent=<Constvalue={1}/>

classConstComponentFixedextendsPureComponent{

handleClick=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleClick}>Update</button>

{component} {component} {component} ...10000... </div> ) }}

26

ConditionalRenderingconstcomponent=<Constvalue={1}/>

classConstComponentFixedextendsPureComponent{

handleClick=()=>{ this.forceUpdate() }

render(){ return( <div> <buttononClick={this.handleClick}>Update</button>

{component} {component} {component} ...10000... </div> ) }}

26

СпасибозаВнимание!

@maxkudla

27