Skip to content

Commit

Permalink
prepare presentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@NookieGrey
NookieGrey committed Apr 17, 2021
1 parent 6d121eb commit f925b5d
Show file tree
Hide file tree
Showing 15 changed files with 523 additions and 281 deletions.
7 changes: 6 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
# Performance

Влияние React memo useCallback useMemo на производительность
Влияние React memo useCallback useMemo на производительность

[When to useMemo and useCallback](https://kentcdodds.com/blog/usememo-and-usecallback)
[Should You Really Use useMemo in React? Let’s Find Out.](https://medium.com/swlh/should-you-use-usememo-in-react-a-benchmarked-analysis-159faf6609b7)
[Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior -> Memoize Everything?](
https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior#memoize-everything)
22 changes: 16 additions & 6 deletions src/Routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import VisualizeMountPage5 from "./VisualizeMountPage5";
import VisualizeUpdate from "./VisualizeUpdate";
import VisualizeUpdateReal from "./VisualizeUpdateReal";
import VisualizeWormUp from "./VisualizeWormUp";
import VisualizeUpdateReal2 from "./VisualizeUpdateReal2";
import Test from "./Test";

import './routes.css';

Expand All @@ -34,18 +36,15 @@ const Routes = () => {
<li>
<Link to="/visualizeMountPage">Visualize Mount Page Reload</Link>
</li>
<li>
<Link to="/visualizeMountPage5">Visualize Mount 5 Page Reload</Link>
</li>
<li>
<Link to="/visualizeMountState">Visualize Mount State Reload</Link>
</li>
<li>
<Link to="/visualizeUpdate">Visualize Update</Link>
</li>
<li>
<Link to="/visualizeUpdateReal">Visualize Update Real</Link>
</li>
<li>
<Link to="/VisualizeUpdateReal2">Visualize Update Real 2</Link>
</li>
</ul>
<ul>
<li>
Expand All @@ -63,6 +62,9 @@ const Routes = () => {
<li>
<Link to="/generatorMountWormUp">Generate Mount Worm Up</Link>
</li>
<li>
<Link to="/Test">Test</Link>
</li>
</ul>
</nav>
<Switch>
Expand All @@ -86,6 +88,10 @@ const Routes = () => {
path="/generatorMountWormUp"
component={GeneratorMountWormUp}
/>
<Route
path="/Test"
component={Test}
/>
<Route
path="/visualizeMountPage"
component={VisualizeMountPage}
Expand Down Expand Up @@ -114,6 +120,10 @@ const Routes = () => {
path="/visualizeWormUp"
component={VisualizeWormUp}
/>
<Route
path="/VisualizeUpdateReal2"
component={VisualizeUpdateReal2}
/>
</Switch>
</Router>
)
Expand Down
41 changes: 41 additions & 0 deletions src/Test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import {Profiler, useEffect, useState} from 'react';


const Child = () => {
const [, setState] = useState();

useEffect(() => {
setInterval(() => setState({}), 100)
}, [])

console.count('Child');

return (
<div>
Child
</div>
)
}

const Component = () => {
console.count('Component');

return (
<div>
<Child/>
</div>
)
}

const Test = () => {
console.count('Test');

return (
<Profiler id="test" onRender={(id, phase, duration) => console.count('profiler')}>
<Component/>
</Profiler>
)
}


export default Test;
95 changes: 48 additions & 47 deletions src/VisualizeMountPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import './virtualize.css';
import json from './mount.json';
import {reducer, action, getColor, allChecked, MemoLabels} from "./visualizeUtils";


const Visualize = () => {
const [lineChecks, dispatchLine] = useReducer(reducer(json), {});
const [axisChecks, dispatchAxis] = useReducer(reducer(json), {});
Expand All @@ -25,51 +24,7 @@ const Visualize = () => {
, [axisChecks]);

return (
<div className='wrapper'>
<div className="chart">
<VictoryChart
height={400}
containerComponent={
<VictoryZoomContainer
zoomDimension="y"
zoomDomain={{y: [130, 210]}}
/>
}
>
<VictoryAxis
dependentAxis
crossAxis
label="Time (ms)"
style={{axisLabel: {padding: 35}}}
tickValues={[130, 165, 180, 210, ...averages.map(({average}) => average)]}
tickFormat={undefined}
/>
{checkedLines.map(({name, data, index}) => {
return (
<VictoryLine
key={name}
interpolation='bundle'
data={data}
style={{data: {stroke: getColor(index, json.length)}}}
/>
)
})}
{averages
.map(({average, index}) => {
return (
<VictoryAxis
key={index}
style={{
tickLabels: {fill: "none"},
axis: {stroke: getColor(index, json.length), strokeWidth: 5}
}}
axisValue={average}
/>
);
})}

</VictoryChart>
</div>
<>
<div className="form">
<input
type='checkbox' checked={allChecked(lineChecks) && allChecked(axisChecks)}
Expand Down Expand Up @@ -122,7 +77,53 @@ const Visualize = () => {
)
})}
</div>
</div>
<div className="clear"/>
<h1>Стоимость мемоизации 10-15%</h1>
<div className="chart">
<VictoryChart
height={600}
width={1600}
containerComponent={
<VictoryZoomContainer
zoomDimension="y"
zoomDomain={{y: [130, 210]}}
/>
}
>
<VictoryAxis
dependentAxis
crossAxis
label="Time (ms)"
style={{axisLabel: {padding: 35}}}
tickValues={[130, 165, 180, 210, ...averages.map(({average}) => average)]}
tickFormat={undefined}
/>
{checkedLines.map(({name, data, index}) => {
return (
<VictoryLine
key={name}
data={data}
style={{data: {stroke: getColor(index, json.length)}}}
/>
)
})}
{averages
.map(({average, index}) => {
return (
<VictoryAxis
key={index}
style={{
tickLabels: {fill: "none"},
axis: {stroke: getColor(index, json.length), strokeWidth: 5}
}}
axisValue={average}
/>
);
})}

</VictoryChart>
</div>
</>
)
}

Expand Down
93 changes: 48 additions & 45 deletions src/VisualizeMountPage5.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,50 +26,7 @@ const Visualize = () => {
, [axisChecks]);

return (
<div className='wrapper'>
<div className="chart">
<VictoryChart
height={400}
containerComponent={
<VictoryZoomContainer
zoomDimension="y"
zoomDomain={zoomDomain}
/>
}
>
<VictoryAxis
dependentAxis
crossAxis
label="Time (ms)"
style={{axisLabel: {padding: 35}}}
tickValues={[275, ...zoomDomain.y, ...averages.map(({average}) => average)]}
tickFormat={undefined}
/>
{checkedLines.map(({name, data, index}) => {
return (
<VictoryLine
key={name}
data={data}
style={{data: {stroke: getColor(index, json.length)}}}
/>
)
})}
{averages
.map(({average, index}) => {
return (
<VictoryAxis
key={index}
style={{
tickLabels: {fill: "none"},
axis: {stroke: getColor(index, json.length), strokeWidth: 5}
}}
axisValue={average}
/>
);
})}

</VictoryChart>
</div>
<>
<div className="form">
<input
type='checkbox' checked={allChecked(lineChecks) && allChecked(axisChecks)}
Expand Down Expand Up @@ -122,7 +79,53 @@ const Visualize = () => {
)
})}
</div>
</div>
<div className="clear"/>
<h1>Стоимость мемоизации 10-15%</h1>
<div className="chart">
<VictoryChart
height={600}
width={1600}
containerComponent={
<VictoryZoomContainer
zoomDimension="y"
zoomDomain={zoomDomain}
/>
}
>
<VictoryAxis
dependentAxis
crossAxis
label="Time (ms)"
style={{axisLabel: {padding: 35}}}
tickValues={[275, ...zoomDomain.y, ...averages.map(({average}) => average)]}
tickFormat={undefined}
/>
{checkedLines.map(({name, data, index}) => {
return (
<VictoryLine
key={name}
data={data}
style={{data: {stroke: getColor(index, json.length)}}}
/>
)
})}
{averages
.map(({average, index}) => {
return (
<VictoryAxis
key={index}
style={{
tickLabels: {fill: "none"},
axis: {stroke: getColor(index, json.length), strokeWidth: 5}
}}
axisValue={average}
/>
);
})}

</VictoryChart>
</div>
</>
)
}

Expand Down
Loading

0 comments on commit f925b5d

Please sign in to comment.