improve performance : shoudComponentUpdate, PureComponent
This commit is contained in:
35
react_webgame/main/RenderTest.jsx
Normal file
35
react_webgame/main/RenderTest.jsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import React, { PureComponent } from 'react';
|
||||||
|
|
||||||
|
class Test extends PureComponent {
|
||||||
|
state = {
|
||||||
|
counter: 0,
|
||||||
|
string: 'hello',
|
||||||
|
number: 1,
|
||||||
|
boolean: true,
|
||||||
|
object: {},
|
||||||
|
array: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
// shouldComponentUpdate(nextProps, nextState, nextContext) {
|
||||||
|
// if(this.state.counter !== nextState.counter) {
|
||||||
|
// return true;
|
||||||
|
// }
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
|
||||||
|
onClick = () => {
|
||||||
|
this.setState({
|
||||||
|
array: [...this.state.array, 1],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
console.log('렌더링', this.state);
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick={this.onClick}>클릭</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default Test;
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDom from 'react-dom';
|
import ReactDom from 'react-dom';
|
||||||
|
|
||||||
import NumberBaseball from './NumberBaseball';
|
import Test from './RenderTest';
|
||||||
|
|
||||||
ReactDom.render(<NumberBaseball />, document.querySelector('#root'));
|
|
||||||
|
ReactDom.render(<Test />, document.querySelector('#root'));
|
||||||
Reference in New Issue
Block a user