React 이벤트 바인딩의 여러 방법 공유

이 글은 주로 React 학습에서 이벤트 바인딩을 위한 여러 가지 방법을 비교하여 소개합니다. 샘플 코드를 통해 매우 자세하게 소개되어 있어 모든 사람의 학습이나 업무에 도움이 되기를 바랍니다. React 이벤트 바인딩 방법에 대한 더 깊은 이해.

React 이벤트 바인딩

클래스 메소드는 기본적으로 이것을 바인딩하지 않기 때문에 호출 시 바인딩하는 것을 잊어버리면 this의 값이 정의되지 않습니다.

보통 직접 호출되지 않는 경우 메서드에 바인딩되어야 합니다. 여러 바인딩 방법이 있습니다:

1. 생성자에서 이것을 바인딩하려면

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

2. 호출할 때 바인딩을 사용하세요.

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
  Click me
  </button>
 );
 }
}

3을 호출할 때 화살표 함수를 사용하세요. 4. 속성 초기화 구문을 사용하여 이것을 바인딩합니다(실험적)

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={()=>this.handleClick()}>
  Click me
  </button>
 );
 }
}

Comparison

메서드 2와 3 모두 호출 시 이것을 바인딩합니다.

장점: 작성 방법이 비교적 간단합니다. 구성 요소에 상태가 없으면 이를 바인딩하기 위해 클래스 생성자를 추가할 필요가 없습니다.

• 단점: 매번 새로운 메서드 인스턴스가 생성됩니다. 호출되므로 성능에 부정적인 영향을 미치며, 이 함수가 하위 구성 요소에 속성 값으로 전달되면 해당 구성 요소는 새로운 메소드 인스턴스가 전달될 때마다 추가로 다시 렌더링될 수 있습니다. 새로운 재산으로.

• 메서드 1 클래스 생성자에서 바인딩합니다. 호출 시 다시 바인딩할 필요가 없습니다.

장점: 메서드 인스턴스가 하나만 생성되며, 한 번 바인딩하면 이 메서드를 여러 번 사용할 필요가 없습니다. 다시 묶으세요.

• 단점: 상태를 사용하지 않더라도 이를 바인딩하려면 클래스 생성자를 추가해야 하므로 코드가 조금 더 필요합니다. . .

• 방법 4: 속성 초기화 구문을 사용하여 메서드를 화살표 함수로 초기화하므로 함수 생성 시 바인딩됩니다.

장점: 메서드 생성 시 이것을 바인딩하고, 클래스 생성자에서 바인딩할 필요가 없으며, 호출 시 다시 바인딩할 필요가 없습니다. 방법 1, 방법 2, 방법 3의 장점을 결합

• 단점: 아직 실험적인 구문이므로 babel

• 로 번역해야 함. 관련 권장 사항:

jQuery 이벤트 바인딩 기능에 대한 기본 설명

jQuery에서 구현한 기본 이벤트 바인딩 기능에 대한 자세한 설명

ES6에서 javascript에서 구현한 함수 바인딩 및 클래스 이벤트 바인딩 기능에 대한 자세한 설명

위 내용은 React 이벤트 바인딩의 여러 방법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!