2016-07-28 5 views
0

현재 React를 배우고 있으며, 상용구로 시작했습니다. 위의 코드와 동등하게다른 React 구성 요소 구문

export const Header =() => (
    ... 
) 

export default Header 

: 그들은이 구문을 사용

export default React.createClass({ 
    ... 
}) 

또는

export const CompName = React.createClass({ 
    ... 
}) 

설명하시기 바랍니다, 감사합니다!

답변

2

이것은 새로운 (ish) stateless functional component syntax의 예입니다. 이것은 소품을 기반으로 JSX를 반환하는 단일 함수 인 구성 요소를 갖는보다 간결한 방법입니다. Here은 배경이 약간있는 매체 게시물입니다.

+0

간단하기 때문에 대부분의 경우이 값을 사용하는 것을 선호합니다. 그러나 그들에 대한 단점 중 일부는 다음과 같습니다 : 반응 라이프 사이클 방법 없음 (즉, componentDidMount 또는 기타 없음); 이는 shouldComponentUpdate 메소드가 없음을 의미합니다. 즉, 특정 성능 최적화를 사용할 수 없음을 의미합니다. https://facebook.github.io/react/docs/advanced-performance.html#avoiding-reconciling-thedom .. , 나는 대부분의 구성 요소가 Redux 컨테이너 구성 요소의 하위 요소라는 사실을 발견했습니다. 이는 자동으로 shouldComponentUpdate를 활용하므로 큰 문제는 아닙니다. – John

관련 문제