성능을 향상시키기 위해 React에서 Memoization을 구현하는 방법-JS 튜토리얼-php.cn

How to Implement Memoization in React to Improve Performance 이 자습서는 React에서 Memoization을 구현하는 방법을 설명합니다. 암기는 고가의 기능 호출 결과를 저장하고 필요할 때이 캐시 된 결과를 반환하여 성능을 향상시킵니다.

우리는 다음을 다룰 것입니다

반응 로 UI를 렌더링하는 방법 반응 메모리가 필요한 이유는 무엇입니까?

기능 및 클래스 구성 요소에 대한 메모리를 구현하는 방법 메모리에 대한 예방 조치

이 기사에서는 반응의 클래스 구성 요소와 기능 구성 요소에 대한 기본적인 이해가 있다고 가정합니다. 이 주제를 검토하려면 공식 React 구성 요소 및 소품 문서를 확인하십시오.

키 포인트

React의 암기는 고가의 기능 호출 결과를 저장하고 필요할 때이 캐시 된 결과를 다시 반환하여 성능을 향상시킵니다.

React는 가상 DOM을 사용하여 DOM 업데이트를 효율적으로 수행하지만 대규모 구성 요소의 경우 가상 DOM 확인의 성능이 매우 높을 수 있습니다. 암기는 불필요한 재 렌더링 및 가상 DOM 점검을 피하는 데 도움이 될 수 있습니다.

및

는 각각 클래스 구성 요소 및 기능 구성 요소에서 메모리를 구현하는 데 사용될 수 있습니다. 이러한 방법은 구성 요소의 소품이나 상태가 변경되지 않은 경우 불필요한 재 렌즈를 방지합니다.

함수가 자식 구성 요소로 소품으로 전달되면 를 사용하더라도 하위 구성 요소가 다시 렌더링됩니다. 이를 피하기 위해 How to Implement Memoization in React to Improve Performance 후크를 사용하여 상위 구성 요소가 렌더링 할 때마다 함수를 재현하지 못하게 할 수 있습니다.

암기는 React Applications에서주의해서 사용해야합니다. 구성 요소가 동일한 출력을 동일한 소품으로 반환하거나 여러 UI 요소를 포함하거나 (가상 DOM 검사가 성능에 영향을 미치거나) 종종 동일한 소품을 제공 할 때 가장 잘 작동합니다.

반응 로 UI를 렌더링하는 방법 React에서 메모리의 상세한 도입에 들어가기 전에 먼저 React가 Virtual DOM을 사용하여 UI를 어떻게 렌더링하는지 살펴 보겠습니다.

일반 로마는 기본적으로 트리로 표시되는 일련의 노드를 포함합니다. DOM의 각 노드는 UI 요소의 표현입니다. 응용 프로그램에서 상태 변경이 발생할 때마다 해당 UI 요소의 해당 노드 및 모든 하위 요소가 DOM에서 업데이트 된 다음 UI가 업데이트 된 변경 사항을 반영하도록 다시 페인트됩니다.

효율적인 트리 알고리즘을 사용하면 노드 업데이트가 더 빠르지 만 다시 주도하는 것이 느려지고 DOM에 많은 UI 요소가 있으면 성능에 영향을 미칩니다. 따라서 가상 DOM은 React에 도입됩니다.

이것은 실제 돔의 가상 표현입니다. 이제 응용 프로그램 상태가 어쨌든 변경 될 때마다 React는 실제 DOM을 직접 업데이트하지 않지만 새로운 가상 DOM을 생성합니다. 그런 다음 React는이 새로운 가상 DOM을 이전에 만든 가상 DOM과 비교하여 다시 그려야 할 차이점을 찾습니다.

이러한 차이점을 사용하여 가상 DOM은 변경 사항으로 실제 DOM을 효과적으로 업데이트합니다. 가상 DOM은 단순히 UI 요소와 모든 자식 요소를 업데이트하지 않고 실제 DOM의 최소한의 필요한 변경 만 효과적으로 업데이트하기 때문에 성능을 향상시킵니다.

왜 우리는 반응 메모리가 필요한가

이전 섹션에서는 RECT가 가상 DOM을 사용하여 성능을 향상시키기 위해 DOM 업데이트를 효과적으로 수행 할 수있는 방법을 보았습니다. 이 섹션에서는 성능을 더욱 향상시키기 위해 메모리가 필요한 이유를 설명하는 사용 사례를 살펴 보겠습니다.

우리는 카운트라는 상태 변수를 증분하기 위해 버튼이있는 부모 클래스를 만듭니다. 부모 구성 요소는 또한 자식 구성 요소를 호출하여 소품을 전달합니다. 또한 Console.log () 문을 두 클래스의 렌더 메소드에 추가했습니다.

이 예제의 전체 코드는 CodesandBox에서 사용할 수 있습니다.

우리는 부모 구성 요소가 전달한 소품을 가져 와서 UI에 표시하는 어린이 수업을 만듭니다.

부모 구성 요소의 버튼을 클릭 할 때마다 카운트 값이 변경됩니다. 이것은 상태 변경이므로 상위 구성 요소의 렌더 메소드가 호출됩니다.

서브 클래스로 전달 된 소품은 부모가 다시 렌더링 할 때마다 변하지 않으므로 아동 구성 요소를 다시 렌더링해서는 안됩니다. 그러나 위의 코드를 실행하고 카운트를 계속 증가시킬 때 다음과 같은 출력을 얻습니다.

다음 샌드 박스에서 위의 예제의 수를 늘리고 콘솔의 출력을 볼 수 있습니다 : [코드 및 박스 링크는 여기에 포함되어야하지만 외부 웹 사이트에 액세스 할 수 없으므로 제공 할 수 없습니다]

//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"} />
      </div>
    );
  }
}

export default Parent;

로그인 후 복사

이 출력에서 부모 구성 요소가 다시 렌더링되면 소품이 어린이 구성 요소로 전달 된 경우에도 하위 구성 요소를 다시 렌더링하는 것을 알 수 있습니다. 이로 인해 하위 구성 요소의 가상 DOM이 이전 가상 DOM과 차이 점검을 수행하게됩니다. 자식 구성 요소에는 차이가 없기 때문에 모든 재 렌즈에서 소품이 동일하기 때문에 실제 DOM은 업데이트되지 않습니다.

우리는 실제 DOM을 불필요하게 업데이트하지 않는 성능 이점이 있지만 여기서는 새로운 가상 DOM이 생성되고 자식 구성 요소가 실제로 변경되지 않은 경우에도 차이 점검이 수행되는 것을 알 수 있습니다. 소규모 React 구성 요소의 경우이 성능은 무시할 수 있지만 큰 구성 요소의 경우 성능 영향이 좋습니다. 이 재 렌더링 및 가상 DOM 검사를 피하기 위해 메모리를 사용합니다.

반응에서의 암기

React 응용 프로그램의 맥락에서, 암기는 부모 구성 요소가 다시 렌더링 될 때마다 아동 구성 요소가 소품이 변경 될 때만 재 렌더링되는 기술입니다. 소품이 변경되지 않은 경우 렌더 메소드를 실행하지는 않지만 캐시 결과를 반환합니다. 렌더 방법이 실행되지 않으므로 가상 DOM 및 차동 점검이 생성되지 않으므로 성능이 향상됩니다.

이제이 불필요한 재 렌더링을 피하기 위해 클래스 및 기능적 반응 구성 요소에서 암기가 어떻게 구현되는지 살펴 보겠습니다.

//Child.js
class Child extends React.Component {
  render() {
    console.log("Child render");
    return (
      <div>
        <h2>Name: {this.props.name}</h2>
      </div>
    );
  }
}

export default Child;

로그인 후 복사

(다음 내용은 언어와 표현식이 약간 조정되었고 이미지 위치와 형식이 변경되지 않은 경우를 제외하고 원래 텍스트와 유사합니다. 외부 웹 사이트에 액세스 할 수 없기 때문에 코드 및 박스 링크를 제공 할 수 없습니다. .) <.> 클래스 구성 요소에서 메모리를 구현하십시오 클래스 구성 요소에서 메모리를 구현하려면 <🎜 🎜>를 사용합니다.

는

를 구현하며, 이는 상태와 소품과 렌더링이 소품이나 상태가 변경되는 경우에만 구성 요소를 반응합니다.

하위 구성 요소를 아래 표시된 코드로 변경하십시오. React.PureComponent 이 예제의 전체 코드는 다음과 같습니다. 부모 구성 요소는 변경되지 않았습니다. 이제 상위 구성 요소에서 카운트를 증가시킬 때 콘솔의 출력은 다음과 같습니다. React.PureComponent 첫 번째 렌더링의 경우 부모 및 자식 구성 요소의 렌더 메소드를 호출합니다. shouldComponentUpdate() 각 증분 후속 재 렌더에서 부모 구성 요소의 렌더링 함수 만 호출됩니다. 아동 구성 요소는 다시 말하지 않습니다.

기능성 구성 요소에서 메모리를 구현하십시오 기능적 반응 구성 요소에서 메모리를 구현하려면

를 사용합니다. <->는 불필요한 재 렌더링을 피하기 위해

와 유사한 작업을 수행하는 고차 구성 요소 (HOC)입니다.

//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"} />
      </div>
    );
  }
}

export default Parent;

로그인 후 복사

다음은 기능 구성 요소에 대한 코드입니다

우리는 또한 다음과 같이 부모 구성 요소를 기능 구성 요소로 변환합니다.

이 예제의 전체 코드는 다음 샌드 박스에서 볼 수 있습니다. 이제 부모 구성 요소에서 카운트를 증가 시키면 콘솔이 다음을 출력합니다.

<🎜 🎜> <<> 기능에 대한 문제 <🎜 🎜

위의 예에서, 우리는 부모 구성 요소가 다시 렌더링 되더라도 아동 구성 요소에

//Child.js
class Child extends React.Component {
  render() {
    console.log("Child render");
    return (
      <div>
        <h2>Name: {this.props.name}</h2>
      </div>
    );
  }
}

export default Child;

로그인 후 복사

hoc를 사용하면 자식 구성 요소가 다시 렌더링되지 않는다는 것을 알 수 있습니다.

그러나 주목해야 할 작은 문제는 우리가 기능을 아동 구성 요소에 소품으로 전달하면 <🎜 🎜>를 사용하더라도 자식 구성 요소가 다시 렌더링된다는 것입니다. 예를 살펴 보겠습니다.

우리는 아래와 같이 부모 구성 요소를 변경합니다. 여기서 우리는 소품으로 아동 구성 요소에 전달하는 핸들러 기능을 추가합니다.

하위 구성 요소 코드는 변경되지 않았습니다. 우리는 어린이 구성 요소에서 전달 된 함수를 소품으로 사용하지 않습니다.

이제 부모 구성 요소에서 카운트를 증가시킬 때 소품이 변경되지 않더라도 하위 구성 요소를 다시 렌더링하고 다시 렌더링합니다.

그렇다면 아동 구성 요소가 다시 렌더링 한 원인은 무엇입니까? 답은 상위 구성 요소가 다시 렌더링 할 때마다 새로운 핸들러 기능이 생성되어 자식 구성 요소로 전달된다는 것입니다. 이제 핸들러 함수가 재구성 될 때마다 재창조되므로, 하위 구성 요소는 핸들러 참조가 소품과 자식 구성 요소의 얕은 비교 일 때 핸들러 참조가 변경되었음을 발견 할 것입니다.

다음 섹션에서는이 문제를 해결하는 방법을 볼 수 있습니다.

<<> 추가 재실행을 피하려면 `useCallback()` 아동 구성 요소를 다시 렌더링하게하는 주요 문제는 프로그램 함수의 재창조이며, 이는 어린이 구성 요소에 전달 된 참조를 변경합니다. 그러므로 우리는이 레크리에이션을 피할 수있는 방법이 필요합니다. 핸들러가 재생성되지 않으면 핸들러에 대한 참조가 변경되지 않으므로 하위 구성 요소가 다시 표시되지 않습니다.

부모 구성 요소가 렌더링 할 때마다 함수를 재현하지 않으려면 <🎜 🎜>라는 React 후크를 사용합니다. 고리는 React 16에 도입되었다. 후크에 대한 자세한 내용은 React의 공식 후크 문서를 확인하거나 "React Hooks : 시작하고 직접 구축하는 방법"을 확인할 수 있습니다.

Hook는 콜백 함수 및 종속성 목록의 두 매개 변수를 허용합니다.

<<> 다음

예를 고려하십시오 useCallback() <🎜 🎜> <🎜 🎜>는

함수에 추가됩니다. 두 번째 매개 변수 <<>는 빈 배열, 종속성 또는 종속성 목록 일 수 있습니다. 두 번째 매개 변수 변경에 언급 된 종속성이있을 때마다 <🎜 🎜> 함수가 재현됩니다.

에 언급 된 종속성이 변경되지 않은 경우, 첫 번째 매개 변수로서 콜백 함수의 암기 된 버전이 반환됩니다. 우리는 부모 기능 구성 요소를 변경하여 어린이 구성 요소에 전달 된 핸들러의 useCallback() 후크를 사용합니다. (이것은 언어와 표현이 약간 조정되고 이미지 위치와 형식이 변경되지 않은 경우를 제외하고 원본 텍스트와 유사합니다. 외부 웹 사이트에 액세스 할 수 없기 때문에 코드 및 박스 링크를 제공 할 수 없습니다.)

<<> 예방 조치 <🎜 🎜> 암기는 구성 요소의 소품이나 상태가 변경되지 않았을 때 부품의 불필요한 재 렌더링을 피함으로써 React Application 성능을 향상시키는 좋은 기술입니다. 모든 구성 요소에 암기를 추가하는 것을 생각할 수도 있지만 React 구성 요소를 구축하는 좋은 방법은 아닙니다. 구성 요소가 다음 조건을 충족하는 경우에만 메모리를 사용해야합니다.

동일한 소품이 주어지면 동일한 출력을 반환합니다 에는 여러 UI 요소가 있으며 가상 DOM 검사는 성능에 영향을 미칩니다 <🎜 useCallback() ~~동일한 소품이 종종~~

제공됩니다
//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"} /> </div> ); } } export default Parent;
로그인 후 복사
로그인 후 복사
로그인 후 복사

요약 이 튜토리얼에서 우리는 다음을 보았습니다 useCallback() 반응 handleClick()로 UI를 렌더링하는 방법 왜 내가 기억 해야하는지 [x,y] 기능적 반응 구성 요소의 경우 handleClick()에 의해 반응에서 메모리를 달성하는 방법 및 클래스 구성 요소 사용 사례, 를 사용한 후에도 아동 구성 요소는 를 다시 말합니다.
후크를 사용하는 방법은 어린이 구성 요소에 소품으로 함수를 전달할 때 다시 렌더링을 피하십시오. useCallback() useCallback() 반응 메모리에 대한 소개를 찾으 셨기를 바랍니다.
반응 암기에 대한 faqs
(이것은 원본 텍스트와 유사하지만 언어와 표현에 약간의 조정이 이루어졌습니다.)