기능 컴포넌트를 "순수"로 선언합니다.

기능 컴포넌트를 "순수"로 선언합니다.

기능 컴포넌트가 '순수'라는 신호를 리액트에게 보내는 방법React.PureComponent컴포넌트 클래스용?

function C(props) { 
  return <var>{props.n}</var> 
}

반열에 오르지나가다

class C extends React.PureComponent {
  render() {
     return <var>{this.props.n}</var>
  }
}

React 16.6.0에서는 메모가 추가되어 있기 때문에, 다음과 같이 회답합니다.

const C = React.memo(props => {
  return <var>{props.n}</var>
})

함수 프로그래밍 패러다임의 순도 개념을 바탕으로 함수는 다음과 같은 경우 순도입니다.

• 반환 값은 입력 값에 의해서만 결정됩니다.
• 동일한 입력 값에 대해 반환 값은 항상 동일합니다.

React 기능 컴포넌트에 대해서는 다음 두 가지 방법이 있습니다.

1. 사용처:

   import React, { memo } from 'react';
   
   const Component = (props) {
     return (
       // Component code
     )
   }
   
   // Wrap component using "memo" HOC
   export default memo(Component);
   

2. 사용처:

   import React from 'react';
   import { pure } from 'recompose';
   
   const Component = (props) {
     return (
       // Component code
     )
   }
   
   // Wrap component using "pure" HOC
   export default pure(Component);
   

@Shubham 및 @Andrew에게:
아니요, 기능 컴포넌트는 그렇지 않습니다.PureComponents. 기능 컴포넌트는 부모 컴포넌트가 재렌더되면 항상 재렌더됩니다.Pure Component에는 기본값이 포함되어 있습니다.shouldComponentUpdate()그게 OP가 원하는 것 같아요

---

사용할 수 있습니다.pure기능 컴포넌트를 랩 및 최적화하기 위해 재컴포지트를 통해 제공됩니다.

import pure from 'recompose/pure'

const YourFunctionalComponent = (props) => {
  ...
}

export default pure(YourFunctionalComponent)

CodinCat 답변 외에

도서관의 저자 레콤스는 2018년 10월 25일 리액트팀이 후크 도입을 통해 도서관이 해결하려 했던 것을 리액트팀이 해결했다고 메모했다.뿐만 아니라 React 팀은 다음과 같은 이름을 가진 React.memo()와 같은 최적화 기능을 추가했습니다.React.pure()예상보다 일찍.그래서 이제 쓸 때야.React.memo(). 공식 문서를 읽어보십시오.

언급URL : https://stackoverflow.com/questions/43470659/declare-a-functional-component-as-pure