Arrow 함수와 바인딩이 JSX Props에서 성능 문제를 일으키는 이유는 무엇입니까?

최적의 성능을 위해 화살표 함수를 피하고 JSX 소품에 바인딩

React의 Lint 도구는 잠재적인 문제를 강조하여 코드 관행을 향상시키는 것을 목표로 합니다. 일반적인 오류 메시지 중 하나는 "JSX props는 화살표 기능을 사용하면 안 됩니다."입니다. 이는 화살표 기능을 사용하거나 JSX props 내에서 바인드하는 것이 해로운 효과를 지적합니다.

애로우 함수 및 바인드가 성능을 저해하는 이유

화살표 기능을 통합하거나 JSX props에 바인딩하면 성능에 미치는 영향:

• 가비지 수집: 화살표 함수가 생성될 때마다 이전 함수는 삭제됩니다. 여러 요소가 인라인 함수로 렌더링되면 애니메이션이 끊길 수 있습니다.
• 렌더링: 인라인 화살표 함수는 PureComponents 및 shouldComponentUpdate 메서드를 사용하는 구성 요소에서 사용하는 얕은 비교 메커니즘을 방해합니다. 화살표 함수 prop이 매번 다시 생성되므로 prop 변경으로 감지되어 불필요한 재렌더링이 발생합니다.

인라인 핸들러가 재렌더링에 미치는 영향

고려하세요. 다음 예는 다음과 같습니다.

예 1: 인라인 핸들러가 없는 PureComponent

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return <button onClick={onClick}>Click</button>;
  }
}

이 코드에서 Button 구성 요소는 PureComponent에 예상되는 대로 props가 변경될 때만 다시 렌더링됩니다. .

예제 2: 인라인 핸들러가 있는 PureComponent

const Button = (props) => {
  console.log('render button');
  return <button onClick={() => props.onClick()}>Click</button>;
};

인라인 화살표 기능으로 인해 이제 구성 요소 상태가 변경되지 않은 경우에도 Button이 매번 다시 렌더링됩니다. 이렇게 불필요한 다시 렌더링은 성능에 심각한 영향을 미칠 수 있습니다.

모범 사례

이러한 성능 문제를 방지하려면 다음 모범 사례를 따르는 것이 좋습니다.

• JSX 외부에서 이벤트 핸들러 정의: 화살표 함수를 추출하거나 메서드를 별도의 변수 선언으로 바인딩합니다.
• 이 바인딩을 사용합니다. 클래스 구성 요소의 경우 이벤트 바인딩
• 고차 함수 활용: JSX에서 보다 효율적인 이벤트 처리를 위해 map 또는 바인딩ActionCreators와 같은 고차 함수 사용을 고려해보세요.

위 내용은 Arrow 함수와 바인딩이 JSX Props에서 성능 문제를 일으키는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!