상태 부족 구성 요소로 반응 성능을 최적화합니다

이 기사는 React의 무국적 구성 요소를 탐색합니다. 이 유형의 구성 요소에는 호출이 포함되어 있지 않으며 "소품"및 자식 구성 요소를 수신하는 프로세스 만 포함합니다.

키 포인트 요약

this.state = { ... }

RECT의 무국적 구성 요소에는 호출이 포함되어 있지 않습니다. 그들은 들어오는 "소품"과 하위 구성 요소 만 처리하여 테스트 관점에서 더 간단하고 쉽게 분석 할 수 있습니다.

무국적 구성 요소는 기능적 구성 요소로 변환 될 수 있으며, 이는 순수한 JavaScript와 비슷하며 사용 된 프레임 워크에 대한 의존성이 적습니다. 각 소품의 얕은 비교를 허용하는 메소드가 내장되어있는 react.purecomponent를 사용하여 무국적 구성 요소의 성능을 최적화 할 수 있습니다. recompose는 반응의 기능 구성 요소 및 고급 구성 요소를위한 유틸리티 라이브러리입니다. 소품이 변하지 않을 때 다시 렌더링하지 않고 함수 구성 요소를 렌더링하는 데 사용할 수 있습니다.

무국적 구성 요소는 자체 상태 또는 수명주기 방법을 관리하지 않기 때문에 CODE 볼륨 및 메모리 소비를 줄이기 때문에 React Applications의 성능을 크게 향상시킬 수 있습니다. 그러나 수명주기 방법을 사용하지 않거나 자체 상태를 관리하는 것과 같은 몇 가지 제한 사항도 있습니다.

• this.state = { … } 기본 사항
• 코드는 정상적으로 실행됩니다. 매우 기본적이지만 예제를 만듭니다. shouldComponentUpdate 에 주목해야합니다
없이 상태가 없습니다.
는 사용법을 이해하는 데 사용됩니다. 특히 성능 최적화를 수행 할 때는 소품이 실제로 변경되지 않으면 불필요한 재 렌더링을 피해야합니다.
• 여기의 이벤트 핸들러는 "인라인"입니다. 이 구문은 코드가 처리하는 요소에 가깝기 때문에 편리 하며이 구문은
를 수행 할 필요가 없음을 의미합니다.

이러한 인라인 함수를 사용하면 기능이 렌더링 될 때마다 기능이 생성되어야하므로 성능 손실이 거의 없습니다. 이것은 나중에 자세히 설명합니다.

디스플레이 구성 요소

이제 우리는 위의 구성 요소가 무국적자 일뿐 만 아니라 실제로 Dan Abramov가 디스플레이 구성 요소라고 부르는 것임을 알고 있습니다. 이름 일 뿐이지 만 기본적으로는 가볍고 일부 HTML/DOM을 생성하며 상태 데이터를 처리하지 않습니다.

import React, { Component } from 'react'

class User extends Component {
  render() {
    const { name, highlighted, userSelected } = this.props
    console.log('Hey User is being rendered for', [name, highlighted])
    return <div>
      <h3 style={{fontStyle: highlighted ? 'italic' : 'normal'}}
         onClick={event => {
           userSelected()
         }}>
        {name}
      </h3>
    </div>
  }
}

그래서 우리는 그것을 함수로 만들 수 있습니다! 이것은 "시원한"느낌을 줄뿐만 아니라 이해하기 쉽기 때문에 덜 끔찍하게 만듭니다. 입력을 받고 환경과 독립적으로 동일한 출력을 반환합니다. 물론 소품 중 하나가 호출 가능한 기능이기 때문에 "콜백".

다시 작성하자 :

기분이 좋아요? 순수한 자바 스크립트처럼 느껴집니다. 사용중인 프레임 워크에 대해 생각하지 않고 쓸 수 있습니다.

import React, { Component } from 'react'

class User extends Component {
  render() {
    const { name, highlighted, userSelected } = this.props
    console.log('Hey User is being rendered for', [name, highlighted])
    return <div>
      <h3 style={{fontStyle: highlighted ? 'italic' : 'normal'}}
         onClick={event => {
           userSelected()
         }}>
        {name}
      </h3>
    </div>
  }
}

지속적인 재 렌더링 문제

이 코드를 실행하면 아무것도 변경되지 않더라도 구성 요소가 다시 렌더링 될 것임을 알 수 있습니다! 이것은 지금 큰 문제는 아니지만 실제 응용 분야에서는 구성 요소가 점점 더 복잡해지는 경향이 있으며 모든 불필요한 재 렌더링으로 인해 웹 사이트가 속도가 느려집니다.

이 응용 프로그램을 지금 디버그하기 위해

를 사용하는 경우 렌더링에 시간이 낭비된다는 것을 알게 될 것입니다. 죄송합니다! 무엇을해야합니까? ! 반응이 소품이 다르다고 생각하는 방식을 다루기 위해

를 사용해야한다는 것을 보여주고 있으며, 우리는 그것들이 다르지 않다고 확신합니다. React Lifecycle Hook를 추가하려면 구성 요소가 클래스 여야합니다.

alas . 그래서 우리는 원래 클래스 기반 구현으로 돌아가 새로운 라이프 사이클 후크 방법을 추가합니다 : .

클래스 구성 요소로 돌아 가기

const User = ({ name, highlighted, userSelected }) => {
  console.log('Hey User is being rendered for', [name, highlighted])
  return <div>
    <h3 style={{fontStyle: highlighted ? 'italic' : 'normal'}}
       onClick={event => {
         userSelected()
       }}>
      {name}
    </h3>
  </div>
}

새로 추가 된

메소드에주의하십시오. 이것은 약간 추악합니다. 더 이상 기능을 사용할 수 없을뿐만 아니라 변경 될 수있는 소품을 수동으로 나열해야합니다. 여기에는

함수 소품이 변하지 않을 것이라는 대담한 가정이 포함됩니다. 이것은 거의 없지만주의가 필요합니다.

그러나 포함 된 앱 구성 요소가 다시 렌더링 되더라도 한 번만 렌더링됩니다! 따라서 이것은 성능에 좋습니다. 그러나 우리는 더 잘할 수 있습니까? react-addons-perf reft.purecomponent Users->User 반응 15.3 이후 새로운 구성 요소 기본 클래스가 있습니다. 라고하며 각 소품의 "얕은 비교"를 만드는 내장 메소드가 있습니다. 기이! 우리가 이것을 사용하는 경우 특정 소품을 나열 해야하는 사용자 정의 PureComponent 메소드를 폐기 할 수 있습니다. shouldComponentUpdate shouldComponentUpdate

import React, { Component } from 'react'

class User extends Component {
  render() {
    const { name, highlighted, userSelected } = this.props
    console.log('Hey User is being rendered for', [name, highlighted])
    return <div>
      <h3 style={{fontStyle: highlighted ? 'italic' : 'normal'}}
         onClick={event => {
           userSelected()
         }}>
        {name}
      </h3>
    </div>
  }
}

시도해 보면 실망 할 것입니다. 매번 렌더링됩니다. 왜? ! 대답은 기능이 앱의 메소드에서 매번 재현되기 때문입니다. 이것은 a 기반 구성 요소가 자체 를 호출 할 때 를 호출 할 때, 함수는 매번 생성되기 때문에 항상 다른 것이기 때문에 를 반환한다는 것을 의미합니다. 일반적으로,이 문제에 대한 해결책은 구성 요소를 포함하는 생성자의 함수를 바인딩하는 것입니다. 먼저, 이렇게한다면 메소드 이름을 5 번 (및 1)를 입력해야한다는 것을 의미합니다.

(생성자에서) userSelected (메소드 정의 자체로) render PureComponent (사용자 구성 요소의 렌더링이 정의되는 경우) shouldComponentUpdate() 또 다른 문제는 알 수 있듯이 true 메소드가 실제로 실행되면 폐쇄에 따라 다르다는 것입니다. 특히, 반복자의 범위 변수

에 의존합니다.

는이 문제에 대한 해결책이 있습니다.이 문제는 먼저

메소드를 에 바인딩 한 다음 메소드가 (자식 구성 요소에서) 호출되면 (또는 그 이름을 전달하는 경우입니다. ) 돌아 가라. 다음은 이와 같은 해결책입니다.

구조를 권장하십시오!
• 먼저, 우리의 목표를 검토합시다 :
  기능 구성 요소 작성은 기능이기 때문에 기분이 좋아집니다. 이것은 즉시 코드 리더에게 어떤 상태도 저장되지 않는다고 말합니다. 단위 테스트 관점에서 추론하기 쉽습니다. 그리고 그들은 더 간결하고 순수한 JavaScript (그리고 물론 JSX)처럼 느껴집니다.
  1. 우리는 아동 구성 요소에 전달 된 모든 방법을 바인딩하기에는 너무 게으르다. 물론, 방법이 복잡한 경우 동적으로 만드는 대신 메소드를 리팩터링하는 것이 좋습니다. 동적 생성 방법은 우리가 사용되는 곳에 직접 코드를 쓸 수 있으며 이름을 지정할 필요가 없으며 세 곳에서 5 번 언급하지도 않습니다.
  하위 구성 요소는 소품이 변경 될 때만 다시 렌더링되어야합니다. 이는 작고 빠른 구성 요소의 경우에는 중요하지 않을 수 있지만 실제 응용 분야의 경우 이러한 구성 요소가 많을 때 이러한 추가 렌더링은
  2. 를 피할 수있을 때 CPU를 폐기합니다.
  3. (사실, 우리의 이상적인 상황은 구성 요소가 한 번만 렌더링된다는 것입니다. 왜 우리를 위해이 문제를 해결할 수 없는가?이 경우 "반응을 더 빨리 만드는 방법"블로그 게시물은 90% 감소합니다. .) <.> 문서에 따르면, Recompose는 "기능 구성 요소 및 고급 구성 요소를위한 React 유틸리티 도구의 라이브러리입니다. react의 lodash로 생각하십시오." 이 라이브러리에는 탐색해야 할 것이 많지만 이제는 소품이 변경되지 않았을 때 기능 구성 요소를 다시 렌더링하지 않고 렌더링하고 싶습니다. 처음으로 재 작성을 시도했을 때 recompose를 사용하여 함수 구성 요소로 다시 작성했습니다.
  이 코드를 실행하면 소품 (

  및

  키)이 변경되지 않은 경우에도 사용자 구성 요소가 여전히 다시 렌더링됩니다.

  한 걸음 더 나아가 봅시다. 우리는 를 사용하지 않지만 (

  )의 버전을 사용하지만 다음에 집중하려는 소품 키를 지정할 수 있습니다.

  import React, { Component } from 'react'
  
  class User extends Component {
    render() {
      const { name, highlighted, userSelected } = this.props
      console.log('Hey User is being rendered for', [name, highlighted])
      return <div>
        <h3 style={{fontStyle: highlighted ? 'italic' : 'normal'}}
           onClick={event => {
             userSelected()
           }}>
          {name}
        </h3>
      </div>
    }
  }

  이 코드를 실행 한 후

  또는 소품이 변경 될 때만 업데이트됩니다. 상위 구성 요소가 다시 렌더링되면 사용자 구성 요소는 그렇지 않습니다. Long Live! 우리는 금을 찾았습니다!

  토론 name 먼저, 구성 요소 성능을 최적화 할 가치가 있는지 스스로에게 물어보십시오. 아마도 그만한 가치가있을 것입니다. 구성 요소는 가벼워야합니다. 어쩌면 비싼 계산을 구성 요소에서 옮기고 외부 기억에 남는 기능으로 이동하거나 구성 요소를 재구성하여 일부 데이터가 사용시 렌더링 구성 요소를 낭비하지 않도록 할 수 있습니다. 예를 들어,이 예에서는 Fetch가 완료되기 전에 사용자 구성 요소를 렌더링하지 않을 수 있습니다.

  코드를 가장 편리한 방식으로 작성한 다음 프로그램을 시작하고 거기에서 반복하여 더 나은 성능을 발휘하는 것은 나쁜 솔루션이 아닙니다. 이 예에서 성능을 향상 시키려면 다음과 같은 기능 구성 요소를 정의해야합니다.

  ……

  이상적으로는 문제를 우회하는 방법을 보여주기보다는 최상의 솔루션은 React의 새로운 패치이며

  를 "자동으로"식별하는 데 큰 개선을 제공합니다. 동일하지 않다고해서 실제로 다르다는 의미는 아닙니다.

  import React, { Component } from 'react'
  
  class User extends Component {
    render() {
      const { name, highlighted, userSelected } = this.props
      console.log('Hey User is being rendered for', [name, highlighted])
      return <div>
        <h3 style={{fontStyle: highlighted ? 'italic' : 'normal'}}
           onClick={event => {
             userSelected()
           }}>
          {name}
        </h3>
      </div>
    }
  }

  동의하십시오! 생성자 및 각 레크리에이션에서 방법을 결합하는 인라인 함수를 처리해야한다는 타협 대안이 있습니다. 그것이 공개 계급 분야입니다. 바벨의 2 단계 기능이므로 설정이 지원할 수 있습니다. 예를 들어, 여기에 사용하는 지점이 있습니다.이 분기는 더 짧을뿐만 아니라 이제는 모든 비 기능 소품을 수동으로 나열 할 필요가 없음을 의미합니다. 이 솔루션은 폐쇄를 포기해야합니다. 그럼에도 불구하고, 필요할 때

  를 알고 깨닫는 것이 여전히 좋습니다.

  const User = ({ name, highlighted, userSelected }) => {
    console.log('Hey User is being rendered for', [name, highlighted])
    return <div>
      <h3 style={{fontStyle: highlighted ? 'italic' : 'normal'}}
         onClick={event => {
           userSelected()
         }}>
        {name}
      </h3>
    </div>
  }

  RECT에 대한 자세한 내용은 "ES6 Way를 반응"하는 코스를 확인하십시오. shallowEqual

  이 기사는 Jack Franklin이 동료 검토했습니다. Sitepoint의 콘텐츠를 완벽하게 만들 수있는 모든 Sitepoint Peer Reviewer에게 감사드립니다!

  무국적 부품으로 React 성능을 최적화하는 것에 대한 자주 묻는 질문 recompose.onlyUpdateForKeys

  React의 상태가 많은 구성 요소와 무국적 구성 요소의 주요 차이점은 무엇입니까?
  상태 구성 요소 (클래스 구성 요소라고도 함)는 시간이 지남에 따라 구성 요소 상태의 변화에 ​​대한 메모리를 유지합니다. 그들은 구성 요소의 행동과 렌더링에 대한 책임이 있습니다. 반면에, 무국적 구성 요소 (기능성 구성 요소라고도 함)에는 고유 한 상태가 없습니다. 부모 구성 요소로부터 소품 형태로 데이터를 수신하여 렌더링합니다. 그들은 주로 구성 요소의 UI 부분을 담당합니다.

  무국적 구성 요소를 사용하여 React 응용 프로그램의 성능을 최적화하는 방법은 무엇입니까?

  무국적 구성 요소는 React 응용 프로그램의 성능을 크게 향상시킬 수 있습니다. 그들은 자신의 상태 또는 수명주기 방법을 관리하지 않기 때문에 코드가 적으므로 이해하고 테스트하기가 더 쉽습니다. 또한 응용 프로그램에서 소비하는 메모리의 양을 줄일 수 있습니다. 성능을 최적화하려면 상태 구성 요소를 가능한 한 많은 상태 구성 요소로 변환하고 불필요한 재 렌더링을 피하기 위해 React 's

  를 사용할 수 있습니다.

  PureComponent 란 무엇이며 React 성능을 최적화하는 데 어떻게 도움이됩니까?
  는 애플리케이션 성능을 최적화하는 데 도움이되는 특수 반응 구성 요소입니다.

  수명주기 방법을 구현하기 위해 얕은 소품과 상태 비교를 사용합니다. 이는 상태 또는 소품이 변경 될 때만 재 렌더링 될 것이며, 이는 불필요한 재 렌더링을 크게 줄이고 성능을 향상시킬 수 있음을 의미합니다. PureComponent 상태 구성 요소의 상태 구성 요소를 무 상태의 구성 요소로 변환하는 방법은 무엇입니까? shouldComponentUpdate 상태 구성 요소를 상태 부족 구성 요소로 변환하려면 구성 요소에서 상태 또는 수명주기 방법을 제거하는 것이 포함됩니다. 구성 요소는 소품을 통해서만 데이터를 수신하고 렌더링해야합니다. 예는 다음과 같습니다. // 상태 구성 요소 Class Welcome Extends React.component { 렌더 () { 반환 안녕하세요, {this.props.name} ; } } <.> // 무국적 구성 요소 기능 환영 (소품) { 반환 안녕하세요, {props.name} ; } <.> React에서 무국적 구성 요소를 사용하기위한 모범 사례는 무엇입니까?

  React에서 무국적 구성 요소를 사용하기위한 일부 모범 사례는 다음과 같습니다. 가능한 한 많은 것을 사용하여 성능과 가독성을 향상시키고 단일 기능에 집중하십시오. 또한 Cleener 코드를 작성하기 위해 Props Deconstruction을 사용하는 것이 좋습니다.

  무국적 구성 요소는 React에서 수명주기 방법을 사용할 수 있습니까?

  아니요, 무국적 구성 요소는 React에서 수명주기 방법을 사용할 수 없습니다. 수명주기 방법은 클래스 구성 요소에만 적용됩니다. 그러나 React 16.8에 후크가 도입되면 이제 기능 구성 요소에 상태 및 수명주기 기능을 추가 할 수 있습니다.

  RECT에서 무국적 구성 요소의 한계는 무엇입니까?

  무국적 구성 요소에는 많은 장점이 있지만 몇 가지 제한 사항도 있습니다. 수명주기 방법을 사용하거나 자신의 상태를 관리 할 수 ​​없습니다. 그러나 이러한 한계는 React 후크를 사용하여 극복 할 수 있습니다.

  무국적 구성 요소는 어떻게 코드의 가독성을 향상시킬 수 있습니까?
  무국적 구성 요소는 단순성과 선명도를 통해 코드 가독성을 향상시킵니다. 그들은 자신의 상태를 관리하거나 수명주기 방법을 사용하지 않으므로 더 간단하고 이해하기 쉽습니다. 또한 작고 재사용 가능한 구성 요소의 사용을 장려하여 코드를보다 체계적이고 유지 관리하기 쉽게 만들 수 있습니다.
  무국적 구성 요소가 React에서 이벤트를 처리 할 수 ​​있습니까?

  예, 무국적 구성 요소는 React에서 이벤트를 처리 할 수 ​​있습니다. 이벤트 핸들러는 무국적 구성 요소에 소품으로 전달 될 수 있습니다. 예는 다음과 같습니다. function actionLink (props) { 반품 (

  나를 클릭하십시오
  ); } <.> 무국적 구성 요소는 코드의 모듈화를 어떻게 촉진합니까?
  무국적 구성 요소는 작고 재사용 가능한 구성 요소의 사용을 촉진하여 코드의 모듈화를 촉진합니다. 각 구성 요소는 독립적으로 개발 및 테스트 할 수 있으므로 코드를보다 쉽게 ​​유지하고 이해할 수 있습니다. 또한 각 구성 요소가 단일 함수를 담당하는 문제의 분리를 권장합니다.

위 내용은 상태 부족 구성 요소로 반응 성능을 최적화합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!