반응 기능 구성 요소의 경우이 좋은 방법입니까?

Question

최근에는 기능 스타일에서 반응 구성 요소가 점점 더 많이 쓰여지고 있습니다. 대부분의 기능에 라이프 사이클 기능이나 상태가 필요하지 않기 때문에. 내 구성 요소 (다시, 그냥 함수) 내에서 헬퍼 함수를 ​​정의합니다 - onClick 함수와 모든 재즈. 그러나 이것이 좋은 연습이라면 지금 생각하고 있습니다. 이 함수는 각 렌더에 대해 호출되기 때문에 모든 내부 함수를 다시 생성합니까? 나는 기억 상실에 대한 호기심 그리고 난이 잘못 .... 구성 요소의 예를하고 있어요 여부 :

import React from 'react'; 
import { connect } from 'react-redux'; 

import ProductSearch from '../Plan/components/ProductSearch'; 

const BlockedProducts = (props) => { 
    const onSelectProduct = (product_key) => { 
    console.log(product_key); 
    }; 

    return (
    <ProductSearch onSelectProduct={ onSelectProduct } /> 
); 
}; 

export default connect()(BlockedProducts); 

Answer 1

예, 확실히 성능이 약간 당신이있어 사실 덕분에이 타격을받을 것입니다 BlockedProducts을 렌더링 할 때마다 함수를 선언합니다. 얼마나 효율적으로 가비지 콜렉션에서 정리 되었는 지 모르겠지만 운을 누르지 않는 것이 가장 좋습니다.

React의 기능 구성 요소는 실제로 완전히 상태를 유지하지 않으며 프레젠테이션 이외의 기능을 수행하지 않습니다. 이상적인 기능 구성 요소는 일부 JSX/HTML을 렌더링하고 종소리와 호각을 반환합니다. 필자의 의견으로는, 기능 구성 요소 만이 리턴을 가져야하고, 내부 기능을 추가하자마자 완전한 본격적인 React 클래스로 업그레이드되어야한다.

Answer 2

onSelectProduct 선언을 BlockedProducts 범위에서 구성 요소 위로 가져 가서 이동할 수 있습니다. BlockedProducts 선언은 onSelectProduct과 동일한 범위에 있으므로 구성 요소의 범위를 닫습니다.

필자는 퍼프 (perf) 문제가 발생할 것이라고 생각하지 않습니다. 나는 @jered에 동의한다. - 상태 비 저장 구성 요소는 가능한 한 간단해야하므로 비즈니스 로직을 만들지 않도록 노력해야한다.

Answer 3

나는 최근에 같은 질문에 왔습니다. https://github.com/yannickcr/eslint-plugin-react/issues/357 Daniel은 이러한 접근 방식이 GC 작업량을 증가시킬 것이므로 클래스 구성 요소를 대신 사용한다고 설명합니다.

우선 모든 클래스 구성 요소는 수명주기 및 상태를 처리하기위한 것이며 또한 수명주기 및 상태를 처리한다고 가정하는 백업 빈을 작성하여 성능에 영향을 미친다 고 주장합니다. 실제 성능 문제가 Btw는

를 발생할 때

그러므로 내가 대신 기능 클래스를 사용하여 클래스의 구성 요소를 만들 것입니다 10 개월 통과, 난 당신이 마침내과 sticked 한 접근하는 궁금?