JSX Props에서 화살표 함수나 바인딩을 피해야 하는 이유는 무엇입니까?

JSX Props에서 화살표 함수나 바인딩을 사용하면 안 되는 이유

React를 사용할 때는 화살표 함수나 바인딩을 사용하지 않는 것이 중요합니다. JSX 소품의 바인딩. 이렇게 하면 성능 문제와 잘못된 동작이 발생할 수 있습니다.

성능 문제

화살표 함수를 사용하거나 JSX props 내 바인딩을 사용하면 각 렌더링에서 이러한 함수가 다시 생성됩니다. 이는 다음을 의미합니다.

• 이전 함수가 폐기되어 가비지 수집이 시작됩니다.
• 많은 요소를 지속적으로 렌더링하면 성능이 저하될 수 있습니다.
• PureComponents에 의존하는 구성 요소 또는 shouldComponentUpdate가 화살표 함수 prop 변경으로 인해 여전히 다시 렌더링을 트리거합니다.

잘못된 동작

다음 예를 고려하세요.

onClick={() => this.handleDelete(tile)}

이 코드는 각 렌더링마다 새로운 함수를 생성하여 React가 구성 요소를 더티로 표시하고 다시 렌더링을 트리거하도록 합니다. 타일 ​​소품이 변경되지 않았더라도 화살표 기능이 다르기 때문에 구성요소가 다시 렌더링됩니다.

모범 사례

이러한 함정을 피하려면 다음 모범 사례:

• 생성자에서 이벤트 핸들러 바인딩:

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• 외부에서 화살표 함수 만들기 렌더링 방법:

const handleDelete = tile => {
  // Handle delete logic
};

추가 참고 사항:

다른 부분에서 사용할 때 화살표 기능이 완벽하게 괜찮다는 점에 유의하는 것이 중요합니다. render 메소드 내에서와 같은 구성 요소의. 그러나 JSX props에 이벤트 핸들러를 할당할 때는 피해야 합니다.

위 내용은 JSX Props에서 화살표 함수나 바인딩을 피해야 하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!