기능 상태 비저장 컴포넌트, Pure Component, Component에 대응합니다. 차이점은 무엇이며 무엇을 사용해야 합니까?

기능 상태 비저장 컴포넌트, Pure Component, Component에 대응합니다. 차이점은 무엇이며 무엇을 사용해야 합니까?

React v15.3.0부터 PureComponent라는 새로운 베이스 클래스가 PureRenderMixin에 내장되어 확장된다는 것을 알게 되었습니다.내가 이해한 것은, 후드 아래에서는, 이것은 안에 있는 소품들을 얄팍하게 비교한다는 것이다.shouldComponentUpdate.

React 컴포넌트를 정의하는 방법에는 다음 3가지가 있습니다.

1. 클래스를 확장하지 않는 기능 상태 비저장 구성 요소
2. 「 」를 .PureComponent 표시
3. 「」를 하는 .Component 표시

옛날에는 스테이트리스 컴포넌트를 순수 컴포넌트 또는 덤 컴포넌트라고 불렀습니다.리액트에서는 '순수'라는 단어의 정의가 완전히 바뀐 것 같아요

이 세 가지의 기본적인 차이는 이해하지만, 무엇을 선택해야 할지 아직 잘 모르겠습니다.또한 각각의 퍼포먼스에 미치는 영향과 트레이드오프는 무엇입니까?

---

업데이트:

다음 질문들이 제가 밝혀지길 바랍니다.

• 한 컴포넌트를) 할 것인지.PureComponent( ( ( (?
• 퍼포먼스 향상에 의해, 심플함이 없어지는 것에 대한 진정한 트레이드 오프가 실현됩니까?
• 정상 상태를 연장할 필요가 있을까요?Component 할 수 PureComponent포먼먼 향? ???

델의 컴포넌트의 목적/크기/제안/동작에 따라 이들 3가지 중 하나를 어떻게 선택합니까?

장장에서 React.PureComponent ★★★★★★★★★★★★★★★에서React.ComponentshouldComponentUpdate방법상태 비저장 기능 컴포넌트를 사용하는 것은 "아키텍처" 선택이며, 개봉 후 바로 사용할 수 있는 성능상의 이점은 없습니다(아직은 없습니다.

• 쉽게 재사용해야 하는 간단한 프레젠테이션 전용 컴포넌트에서는 스테이트리스 기능 컴포넌트를 선호합니다.이렇게 하면 실제 앱 로직과 분리되어 테스트하기 쉽고 예상치 못한 부작용이 발생하지 않는다는 것을 확신할 수 있습니다.예외는 어떤 이유로든 많은 파일이 있거나 렌더링 방법을 최적화해야 하는 경우(정의할 수 없음)입니다.shouldComponentUpdate스테이트리스 기능 컴포넌트의 경우).

• PureComponent출력이 단순한 소품/상태("단순한"은 중첩된 데이터 구조가 없음을 의미하며, Pure Component는 얕은 비교를 수행하므로)에 따라 성능이 개선되어야 합니다.

• Component인 「실장」을 합니다.shouldComponentUpdate다음/현재 소품 및 상태 간에 커스텀 비교 로직을 수행함으로써 성능 향상이 필요한 경우.예를 들어 lodash#isEqual을 사용하여 상세 비교를 신속하게 수행할 수 있습니다.

  class MyComponent extends Component {
      shouldComponentUpdate (nextProps, nextState) {
          return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
      }
  }
  

,인 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★shouldComponentUpdate 에서 됩니다.PureComponent는 최적화입니다.평소와 마찬가지로 퍼포먼스에 문제가 있는 경우(최적화가 시기상조)에 대해서만 검토해야 합니다.경험으로 볼 때, 대부분의 기능이 이미 구현되어 있는 상태에서 애플리케이션이 작동 상태가 된 후에는 항상 이러한 최적화를 시도합니다.실제로 방해가 되었을 때 성능 문제에 집중하는 것이 훨씬 쉽습니다.

상세

기능 스테이트리스 컴포넌트:

이들은 함수를 사용하여 정의됩니다.스테이트리스 컴포넌트의 내부 상태는 없기 때문에 출력(렌딩되는 것)은 이 함수의 입력으로 제공되는 소품에만 의존합니다.

장점:

• React에서 구성 요소를 정의하는 가장 간단한 방법입니다.상태를 관리할 필요가 없다면 왜 수업과 상속을 신경써야 합니까?함수와 클래스의 주요 차이점 중 하나는 이 함수의 출력이 입력에만 의존한다는 것입니다(이전 실행 이력에 의존하지 않음).

• 이상적으로는 상태 비저장 컴포넌트를 가능한 한 많이 사용하는 것이 좋습니다.이는 일반적으로 로직을 뷰 레이어 밖으로 이동시키고 redux와 같은 것으로 이동시켰기 때문에 실제 로직을 렌더링할 필요 없이 테스트할 수 있음을 의미합니다(테스트가 훨씬 쉬워지거나 재사용이 가능해지는 등).

단점:

• 라이프 사이클 메서드는 없습니다. 정의할 수 이 없어요.componentDidMount른른른른일반적으로 이 작업은 계층 상위 상위 구성 요소 내에서 수행되므로 모든 자식을 상태 비저장 구성 요소로 전환할 수 있습니다.

• 한 경우 수. 리렌더를 정의할 수 때문입니다.shouldComponentUpdate·리렌더는 컴포넌트가 새로운 소품을 받을 때마다 발생합니다(천박한 비교 등).향후 React는 상태 비저장 컴포넌트를 자동으로 최적화할 수 있습니다.현재로서는 사용할 수 있는 라이브러리가 몇 개 있습니다.스테이트리스 컴포넌트는 기능일 뿐이기 때문에 기본적으로 기능 메모화의 전형적인 문제입니다.

• 참조는 지원되지 않습니다.https://github.com/facebook/react/issues/4936

PureComponent 클래스를 확장하는 구성 요소 VS 구성 요소 클래스를 확장하는 일반 구성 요소:

리액트에는 에는 'Respect'가 있었습니다.PureRenderMixin '에 할 수 .React.createClass구문을 사용합니다. " " "를 합니다.shouldComponentUpdate다음 소품과 다음 상태를 얄팍하게 비교하여 변경된 부분이 없는지 확인합니다.아무것도 변경되지 않으면 재렌더를 수행할 필요가 없습니다.

ES6 믹스인 React를 했습니다.PureComponent할 수 , 「 」를 하지 않고, 「 」를 사용할 수 있습니다.ComponentPureComponent를 구현하다shouldComponentUpdate PureRendererMixin현재/다음 상태와 소품 간의 얄팍한 비교가 빠른 퍼포먼스를 얻을 수 있는 가장 일반적인 시나리오이기 때문에 대부분의 경우 사용자가 직접 구현할 필요가 없습니다.

예:

class UserAvatar extends Component {
    render() {
       return <div><img src={this.props.imageUrl} /> {{ this.props.username }} </div>
    }
} 

바와 같이 은 '하다'에 따라 .props.imageUrl ★★★★★★★★★★★★★★★★★」props.username. 컴포넌트에서 <UserAvatar username="fabio" imageUrl="http://foo.com/fabio.jpg" />소품으로 리액트는 【리액트】라고 부른다.render이치노, diffing을 .그러나 돔 디퍼싱을 실행하는 것은 비용이 많이 들기 때문에 이 시나리오에서는 낭비입니다.

경우,UserAvatar 요소가 확장되다PureComponent대신 얕은 비교가 수행됩니다.에 【【【【【 next props】【【 next props】【【 】】render전혀 호출되지 않습니다.

React에서 "순수"의 정의에 대한 주의사항:

일반적으로 "순수 함수"는 동일한 입력이 주어졌을 때 항상 동일한 결과에 대해 평가되는 함수입니다.React의 하는 값입니다.rendermethod)는 이력/상태에 의존하지 않으며 부작용(함수 외부의 "세계"를 변경하는 연산)도 없습니다.

React에서 컴포넌트는 React를 를 "부르는 위의 반드시 .this.setState은 사용하지 this.state.

사,에서는요.PureComponent에서는 라이프 사이클 방법 중에 부작용도 실행할 수 있습니다.를 들어, "" "Ajax" "Ajax" "Ajax" "Ajax" "Ajax" 에서 Ajax 을 보낼 수 있습니다.componentDidMount DOM 할 수 .render.

"덤 컴포넌트"의 정의는 (적어도 제가 이해하기로는) 보다 "실용적인" 의미를 가지고 있습니다.즉, 멍청한 컴포넌트는 부모 컴포넌트에 의해 소품을 통해 무엇을 해야 하는지 "지시"하고, 그 대신 소품 콜백을 사용합니다.

smart의 예AvatarComponent:

class AvatarComponent extends Component {
    expandAvatar () {
        this.setState({ loading: true });
        sendAjaxRequest(...).then(() => {
            this.setState({ loading: false });
        });
    }        

    render () {
        <div onClick={this.expandAvatar}>
            <img src={this.props.username} />
        </div>
    }
}

"dumb"의 예AvatarComponent:

class AvatarComponent extends Component {
    render () {
        <div onClick={this.props.onExpandAvatar}>
            {this.props.loading && <div className="spinner" />}
            <img src={this.props.username} />
        </div>
    }
}

결국, "dumb", "stateless" 및 "pure"는 때때로 중복될 수 있는 상당히 다른 개념이지만, 대부분 사용 사례에 따라서는 반드시 중복될 필요는 없습니다.

나는 오버 리액션의 천재는 아니지만, 내가 이해한 바로는 다음과 같은 상황에서 각각의 컴포넌트를 사용할 수 있다.

1. 상태 비저장 구성요소 - 이러한 구성요소는 수명 주기가 없으므로 정보를 표시만 하고 수행할 작업이 없는 텍스트 목록 렌더링과 같은 상위 구성요소의 반복 요소를 렌더링하는 데 사용해야 합니다.

2. 순수한 구성 요소 - 이것들은 라이프 사이클이 있는 아이템으로 특정 소품 세트가 주어졌을 때 항상 같은 결과가 반환됩니다.이러한 구성 요소는 복잡한 하위 요소가 없는 결과 목록이나 특정 개체 데이터를 표시할 때 사용할 수 있으며, 자체에만 영향을 미치는 작업을 수행하는 데 사용됩니다.사용자 카드 또는 제품 카드 목록(기본 제품 정보)을 표시하고 사용자가 수행할 수 있는 작업은 클릭해서 상세 페이지를 보거나 카트에 추가하는 것뿐입니다.

3. 일반 컴포넌트 또는 복합 컴포넌트 - 복잡한 컴포넌트라는 용어를 사용했습니다.이러한 컴포넌트는 보통 페이지 레벨의 컴포넌트이며 많은 하위 컴포넌트로 구성되어 있습니다.또한 각 서브컴포넌트는 독자적인 방법으로 동작할 수 있기 때문에 특정 상태에서 동일한 결과를 얻을 수 있다고 100% 확신할 수 없습니다.말씀드렸듯이 보통 이것들은 컨테이너 컴포넌트로 사용되어야 합니다.

• React.Component는 기본 "일반" 컴포넌트입니다.는 '신고하다'를 사용해요.class 및 " " "extends React.Component라이프 사이클 메서드, 이벤트 핸들러 등의 메서드를 갖춘 클래스라고 생각하십시오.

• React.PureComponent는 입니다.React.ComponentshouldComponentUpdate() with withison isonison isonison isonisonison 비교 기능을 사용하여props ★★★★★★★★★★★★★★★★★」state를 사용해야 합니다.forceUpdate()구성요소에 변경된 소품 또는 상태 내포 데이터가 있고 다시 포함하려는 경우.따라서 어레이나 오브젝트가 소품으로 전달되거나 상태가 변경될 때 재렌더할 컴포넌트가 필요한 경우에는 적합하지 않습니다.

• 기능 컴포넌트는 라이프 사이클 기능이 없는 컴포넌트입니다.상태 비저장이라고 생각됩니다만, 상태가 매우 양호하고 깨끗하기 때문에, React 16.8이후로 훅이 있기 때문에, 상태를 유지할 수 있습니다.그러니까 그냥 "깨끗한 부품"인 것 같아요.

언급URL : https://stackoverflow.com/questions/40703675/react-functional-stateless-component-purecomponent-component-what-are-the-dif