JS Lab2017, 25 марта, Одесса Lightning Talks React Perfomance (Максим Кудла) Все материалы: http://jslab.in.ua/ Организаторы: http://geekslab.org.ua/

1. React Performance
Is syntactic sugar so sweet?

2. How does React
work?
2

3. How does React work?
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
3

4. How does React work?
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
3

5. How does React work?
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
3

6. How does React work?
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
3

7. How does React work?
var Avatar = function (_Component) {
_inherits(Avatar, _Component);
function Avatar() {
_classCallCheck(this, Avatar);
return _possibleConstructorReturn(this, (Avatar.__proto__ ||
Object.getPrototypeOf(Avatar)).apply(this, arguments));
}
_createClass(Avatar, [{
key: "render",
value: function render() {
return React.createElement(
"img",
_extends({ src: "./public/avatar.png" },
this.props)
);
}
}]);
4

8. React Perf tool
5

9. React Perf tool 6

10. React Perf tool
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
7

11. React Perf tool
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
7

12. React Perf tool
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
7

13. React Perf tool
class Avatar extends Component {
render () {
return (
<img src="./public/avatar.png" {...this.props} />
)
}
}
7

14. Styling
8

15. Styling
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
9

16. Styling
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
class Styling extends PureComponent {
render () {
return <Avatar style={{width: '100px'}} />
}
}
9

17. Styling
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
class Styling extends PureComponent {
render () {
return <Avatar style={{width: '100px'}} />
}
}
9

18. Styling
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
10

19. Styling
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
const style = {width: '100px'}
class StylingFixed extends PureComponent {
render () {
return <Avatar style={style} />
}
}
10

20. Styling
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
const style = {width: '100px'}
class StylingFixed extends PureComponent {
render () {
return <Avatar style={style} />
}
}
10

21. Inline handler
11

22. Inline handler
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
12

23. Inline handler
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
class InlineHandler extends PureComponent {
render () {
return <Avatar onClick={()=>{this.setState({clicked:true})}} />
}
}
12

24. Inline handler
class Avatar extends PureComponent {
render () {
return <img src="./public/avatar.png" {...this.props} />
}
}
class InlineHandler extends PureComponent {
render () {
return <Avatar onClick={()=>{this.setState({clicked:true})}} />
}
}
12

25. Inline handler
var InlineHandler = function (_PureComponent) {
_inherits(InlineHandler, _PureComponent);
function InlineHandler() {
_classCallCheck(this, InlineHandler);
return _possibleConstructorReturn(this, (InlineHandler.__proto__ ||
Object.getPrototypeOf(InlineHandler)).apply(this, arguments));
}
_createClass(InlineHandler, [{
key: "render",
value: function render() {
var _this2 = this;
return React.createElement(
"div",
null,
React.createElement(Avatar, { onClick: function onClick() {
_this2.setState({ clicked: true });
} })
);
}
}]);
return InlineHandler;
}
13

26. Inline handler
class InlineHandlerFixed extends PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
this.setState({
clicked:true
})
}
render () {
return <Avatar onClick={this.handleClick} />
}
}
14

27. Inline handler
class InlineHandlerFixed extends PureComponent {
constructor (props, context) {
super(props, context);
this.handleClick = this.handleClick.bind(this)
}
handleClick () {
this.setState({
clicked:true
})
}
render () {
return <Avatar onClick={this.handleClick} />
}
}
14

28. Composition
15

29. Composition
class Select extends PureComponent {
render () {
return (
<div>
{this.props.children}
</div>
)
}
}
class Option extends PureComponent {
render () {
return (
<span>{this.props.title}</span>
)
}
}
16

30. Composition
class Composition extends PureComponent {
handleUpdate = () => {
this.forceUpdate()
}
render() {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
<Select>
<Option title="Title 1" />
<Option title="Title 2" />
<Option title="Title 3" />
<Option title="Title 4" />
<Option title="Title 5" />
</Select>
</div>
);
}
}
17

31. Composition
class Composition extends PureComponent {
handleUpdate = () => {
this.forceUpdate()
}
render() {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
<Select>
<Option title="Title 1" />
<Option title="Title 2" />
<Option title="Title 3" />
<Option title="Title 4" />
<Option title="Title 5" />
</Select>
</div>
);
}
}
17

32. Composition
class WrappedSelect extends PureComponent {
static propTypes = {
options: PropTypes.array
}
render () {
return (
<Select>
{
this.props.options.map((option) => (
<Option key={option} title={option} />
))
}
</Select>
)
}
}
18

33. Composition
class CompositionFixed extends PureComponent {
constructor (props, context) {
super(props, context)
this.state = {
options: ["Title 1", "Title 2", "Title 3", "Title 4", "Title 5"]
}
}
handleUpdate = () => {
this.forceUpdate()
}
render () {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
<WrappedSelect options={this.state.options}/>
</div>
)
}
}
19

34. Composition
class CompositionFixed extends PureComponent {
constructor (props, context) {
super(props, context)
this.state = {
options: ["Title 1", "Title 2", "Title 3", "Title 4", "Title 5"]
}
}
handleUpdate = () => {
this.forceUpdate()
}
render () {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
<WrappedSelect options={this.state.options}/>
</div>
)
}
}
19

35. Conditional
Rendering
20

36. Conditional Rendering
class ConditionalRendering extends PureComponent {
constructor (props, context) {
super(props, context);
this.state = { list: range(1,100000) }
}
handleUpdate = () => { this.forceUpdate() }
render () {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
{
this.state.list.map((item) => (
<h1 key={item}>{item}</h1>
))
}
</div>
)
}
}
21

37. Conditional Rendering
class ConditionalRendering extends PureComponent {
constructor (props, context) {
super(props, context);
this.state = { list: range(1,100000) }
}
handleUpdate = () => { this.forceUpdate() }
render () {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
{
this.state.list.map((item) => (
<h1 key={item}>{item}</h1>
))
}
</div>
)
}
}
21

38. Conditional Rendering
class List extends PureComponent {
static propTypes = {
list: PropTypes.array
}
render () {
return (
<div>
{
this.props.list.map((item) => (
<h1 key={item}>{item}</h1>
))
}
</div>
)
}
}
22

39. Conditional Rendering
class ConditionalRenderingFixed extends PureComponent {
constructor (props, context) {
super(props, context);
this.state = { list: range(1,100000) }
}
handleUpdate = () => { this.forceUpdate() }
render () {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
<List list={this.state.list}/>
</div>
)
}
}
23

40. Conditional Rendering
class ConditionalRenderingFixed extends PureComponent {
constructor (props, context) {
super(props, context);
this.state = { list: range(1,100000) }
}
handleUpdate = () => { this.forceUpdate() }
render () {
return (
<div>
<button onClick={this.handleUpdate}>Update</button>
<List list={this.state.list}/>
</div>
)
}
}
23

41. Const Component
24

42. Conditional Rendering
class ConstComponent extends PureComponent {
handleClick = () => {
this.forceUpdate()
}
render() {
return (
<div>
<button onClick={this.handleClick}>Update</button>
<Const value={1} />
<Const value={1} />
<Const value={1} />
... 10 000 ...
</div>
)
}
}
25

43. Conditional Rendering
class ConstComponent extends PureComponent {
handleClick = () => {
this.forceUpdate()
}
render() {
return (
<div>
<button onClick={this.handleClick}>Update</button>
<Const value={1} />
<Const value={1} />
<Const value={1} />
... 10 000 ...
</div>
)
}
}
25

44. Conditional Rendering
const component = <Const value={1} />
class ConstComponentFixed extends PureComponent {
handleClick = () => {
this.forceUpdate()
}
render() {
return (
<div>
<button onClick={this.handleClick}>Update</button>
{component}
{component}
{component}
... 10 000 ...
</div>
)
}
}
26

45. Conditional Rendering
const component = <Const value={1} />
class ConstComponentFixed extends PureComponent {
handleClick = () => {
this.forceUpdate()
}
render() {
return (
<div>
<button onClick={this.handleClick}>Update</button>
{component}
{component}
{component}
... 10 000 ...
</div>
)
}
}
26

46. Спасибо за
Внимание!
@maxkudla
27