JSX Props에서 화살표 함수나 바인딩을 사용하지 말아야 하는 이유는 무엇입니까?

화살표 함수 사용을 피하거나 JSX Props에 바인딩

나쁜 습관인 이유:

JSX props에서 화살표 기능이나 바인드를 사용하는 것은 성능에 부정적인 영향을 미치므로 권장되지 않습니다. 이유는 다음과 같습니다.

• 비효율적인 가비지 수집: 각 렌더링에서 함수를 생성하면 구성 요소가 마운트 해제될 때 불필요한 가비지 수집이 트리거됩니다.
• 다음으로 인해 렌더링됩니다. 얕은 비교: 인라인 함수 prop이 매번 다시 생성되므로, prop 값이 변경되지 않은 경우에도 shouldComponentUpdate()에서shallowCompare를 사용하는 PureComponent 및 구성 요소는 다시 렌더링됩니다.

예:

인라인 화살표 기능 없음:

<Button onClick={() => console.log('clicked')} />

버튼은 다른 소품이 변경되지 않는 한 다시 렌더링되지 않습니다.

인라인 화살표 포함 기능:

<Button onClick={this.handleClick} />

핸들러가 동일하더라도 구성요소가 렌더링될 때마다 버튼이 다시 렌더링됩니다.

모범 사례:

이러한 성능 문제를 방지하려면 JSX 외부에서 화살표 함수나 바인딩된 메서드를 선언하세요.

class Button extends React.Component {
  handleClick = () => {
    // Handler logic
  };

  render() {
    return <button onClick={this.handleClick} />;
  }
}

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