성능을 향상시키기 위해 React에서 Memoization을 구현하는 방법
- Joseph Gordon-Levitt원래의
- 2025-02-09 09:00:151014검색
이 자습서는 React에서 Memoization을 구현하는 방법을 설명합니다. 암기는 고가의 기능 호출 결과를 저장하고 필요할 때이 캐시 된 결과를 반환하여 성능을 향상시킵니다.
반응 로 UI를 렌더링하는 방법
및
우리는 부모 구성 요소가 전달한 소품을 가져 와서 UI에 표시하는 어린이 수업을 만듭니다.
를 사용합니다. 는 불필요한 재 렌더링을 피하기 위해
기능에 대한 문제
그러나 주목해야 할 작은 문제는 우리가 기능을 아동 구성 요소에 소품으로 전달하면 를 사용하더라도 자식 구성 요소가 다시 렌더링된다는 것입니다. 예를 살펴 보겠습니다.
하위 구성 요소 코드는 변경되지 않았습니다. 우리는 어린이 구성 요소에서 전달 된 함수를 소품으로 사용하지 않습니다.
Hook는 콜백 함수 및 종속성 목록의 두 매개 변수를 허용합니다. 예를 고려하십시오
요약
이 튜토리얼에서 후크를 사용하는 방법은 어린이 구성 요소에 소품으로 함수를 전달할 때 다시 렌더링을 피하십시오.
후크를 사용하여 상위 구성 요소가 렌더링 할 때마다 함수를 재현하지 못하게 할 수 있습니다.
반응 로 UI를 렌더링하는 방법
우리는 카운트라는 상태 변수를 증분하기 위해 버튼이있는 부모 클래스를 만듭니다. 부모 구성 요소는 또한 자식 구성 요소를 호출하여 소품을 전달합니다. 또한 Console.log () 문을 두 클래스의 렌더 메소드에 추가했습니다.
이 예제의 전체 코드는 CodesandBox에서 사용할 수 있습니다. <code class="language-javascript">//Parent.js
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState((prevState) => {
return { count: prevState.count + 1 };
});
};
render() {
console.log("Parent render");
return (
<div classname="App">
<button onclick="{this.handleClick}">Increment</button>
<h2>Count: {this.state.count}</h2>
<child name='{"joe"}'></child>
</div>
);
}
}
export default Parent;</code>
이 출력에서 부모 구성 요소가 다시 렌더링되면 소품이 어린이 구성 요소로 전달 된 경우에도 하위 구성 요소를 다시 렌더링하는 것을 알 수 있습니다. 이로 인해 하위 구성 요소의 가상 DOM이 이전 가상 DOM과 차이 점검을 수행하게됩니다. 자식 구성 요소에는 차이가 없기 때문에 모든 재 렌즈에서 소품이 동일하기 때문에 실제 DOM은 업데이트되지 않습니다. <code class="language-javascript">//Child.js
class Child extends React.Component {
render() {
console.log("Child render");
return (
<div>
<h2>Name: {this.props.name}</h2>
</div>
);
}
}
export default Child;</code>
는
를 구현하며, 이는 상태와 소품과 렌더링이 소품이나 상태가 변경되는 경우에만 구성 요소를 반응합니다. React.PureComponent
이 예제의 전체 코드는 다음과 같습니다.
React.PureComponent
shouldComponentUpdate()
<code class="language-javascript">//Parent.js
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState((prevState) => {
return { count: prevState.count + 1 };
});
};
render() {
console.log("Parent render");
return (
<div classname="App">
<button onclick="{this.handleClick}">Increment</button>
<h2>Count: {this.state.count}</h2>
<child name='{"joe"}'></child>
</div>
);
}
}
export default Parent;</code>
<code class="language-javascript">//Child.js
class Child extends React.Component {
render() {
console.log("Child render");
return (
<div>
<h2>Name: {this.props.name}</h2>
</div>
);
}
}
export default Child;</code> hoc를 사용하면 자식 구성 요소가 다시 렌더링되지 않는다는 것을 알 수 있습니다.
다음 섹션에서는이 문제를 해결하는 방법을 볼 수 있습니다.
추가 재실행을 피하려면
useCallback()
useCallback()
는 useCallback() 후크를 사용합니다.
동일한 소품이 종종 <code class="language-javascript">//Parent.js
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState((prevState) => {
return { count: prevState.count + 1 };
});
};
render() {
console.log("Parent render");
return (
<div classname="App">
<button onclick="{this.handleClick}">Increment</button>
<h2>Count: {this.state.count}</h2>
<child name='{"joe"}'></child>
</div>
);
}
}
export default Parent;</code>
useCallback()
반응 handleClick()로 UI를 렌더링하는 방법
[x,y]
handleClick()에 의해 반응에서 메모리를 달성하는 방법 및 클래스 구성 요소
사용 사례, 를 사용한 후에도 아동 구성 요소는 를 다시 말합니다.
useCallback()
useCallback()
위 내용은 성능을 향상시키기 위해 React에서 Memoization을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!