Cam Jackson 에 따르면 우리는 Redux를 사용하고 작고 상태 비 저장 기능적인 구성 요소를 작성해야합니다. 예를 들면 다음과 같습니다.
const ListView = ({items}) => (
<ul>
{items.map(item => <ItemView item={item}/>)}
</ul>
)
const ItemView = ({item}) => (
<li><a>{item.name}</a></li>
)
이제 마우스 클릭을 처리하고 클릭 한 항목을 수행하는 작업을 트리거한다고 가정합니다. 나는 이것이 이것을하는 아주 좋은 방법이라고 생각합니다.
const ListView = ({items, onItemClicked}) => {
const _onClick = item => event => {
event.preventDefault()
onItemClicked(item)
}
return (
<ul>
{items.map(item => <ItemView item={item} onClick={_onClick(item)}/>)}
</ul>
)
}
const ItemView = ({item, onClick}) => (
<li><a onClick={onClick}>{item.name}</a></li>
)
그러나 Esa-Matti Suuronen에 따르면 이것은 성능 저하를 유발하는 안티 패턴입니다.
분명히 ItemView컴포넌트 내부에서 이벤트를 처리하고 item. 그러나 렌더링 함수 내에서 함수를 생성하지 않으려면 클래스 구성 요소로 만들어야합니다.
이것은 매우 일반적인 패턴이며, 성능 문제를 일으키지 않고 기능적 구성 요소로 이것을 처리하는 간단한 방법을 찾고 싶습니다. 당신은 무엇을 제안합니까?
이렇게 할 수있는 방법이 없으면 기능 구성 요소를 전혀 사용할 수 없습니다. 자주 생각하지 않기 때문에 어느 시점에서 모든 기능 구성 요소를 클래스로 변환해야합니다.
좀 더 생각하고 나서 할 방법을 찾은 것 같아요. 더 많은 Redux 컨테이너가 필요하다는 것을 알고 있습니다. 주요 최상위 구성 요소뿐만 아니라 재사용 가능한 하위 구성 요소에도 적용됩니다.
위의 예는 다음과 같이 해결할 수 있습니다.
const ListView = ({items, onItemClicked}) => (
<ul>
{items.map(item => <ItemContainer item={item} onItemClicked={onItemClicked}/>)}
</ul>
)
const ItemView = ({item, onClick}) => (
<li><a onClick={onClick}>{item.name}</a></li>
)
const mapDispatch = (dispatch, {item, onItemClicked}) => ({
onClick: (event) => {
event.preventDefault()
onItemClicked(item)
}
})
const ItemContainer = connect(null, mapDispatch)(ItemView)
대부분의 경우 외부 구성 요소에서 내부로 콜백을 전달할 필요가 없습니다 ItemContainer..
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다