Embed Size (px)
Citation preview
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
