React의 Render 메소드에서 바인딩이나 인라인 화살표 함수를 피해야 하는 이유는 무엇입니까?

렌더링 메서드에서 바인드 또는 인라인 화살표 기능 피하기

소개

바인딩 기능 또는 사용 렌더링 메서드 내의 인라인 화살표 함수는 렌더링 중에 성능 문제를 일으킬 수 있으므로 React에서는 권장되지 않습니다. 이 문서에서는 이 방법에 대한 대안을 살펴보고 구현 예를 제공합니다.

렌더링의 바인딩 관련 문제

렌더링에서 함수를 바인딩하거나 인라인 화살표 함수를 사용할 때, 새로운 함수의 인스턴스는 각 렌더링 주기마다 생성됩니다. 이는 특히 자주 다시 렌더링하는 경우 성능 저하로 이어질 수 있습니다.

바인딩 대안

• 구성 요소 생성자 사용:

  • 함수 바인딩 렌더링 중에 동일한 인스턴스를 재사용하려면 생성자에서

• 속성 초기화 구문 사용:

  • 에서 함수를 선언합니다. 클래스 본문을 화살표 함수를 사용하여 속성에 할당합니다.

시나리오: 추가 매개변수 전달

지도 함수 내에서 이벤트 핸들러에 추가 매개변수를 전달하는 경우를 생각해 보세요. 예를 들어 할 일 목록에서 항목을 삭제하는 것을 고려해 보세요.

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}> {el} </div>)

해결책: 하위 구성 요소

바인딩을 방지하려면 매핑된 콘텐츠에 대한 하위 구성 요소를 생성하세요.

부모님 구성 요소:

deleteTodo = (val) => {
    console.log(val)
}
todos.map(el => 
    <MyComponent val={el} onClick={this.deleteTodo}/> 

)

하위 구성 요소(MyComponent):

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

이 접근 방식에서 이벤트 처리기 기능은 하위 구성 요소에 상주하며 다음을 제공합니다. 동안 더 나은 성능 렌더링.

예:

다음은 하위 구성 요소 접근 방식을 보여주는 완전한 예입니다.

class Parent extends React.Component {
     _deleteTodo = (val) => {
        console.log(val)
    }
    render() {
        var todos = ['a', 'b', 'c'];
        return (
           <div>{todos.map(el => 
             <MyComponent key={el} val={el} onClick={this._deleteTodo}/> 
        
           )}</div>
        )
    }
    
   
}

class MyComponent extends React.Component {
        _deleteTodo = () => {
                     console.log('here');   this.props.onClick(this.props.val);
        }
        render() {
           return <div onClick={this._deleteTodo}> {this.props.val} </div>
        }
    }
    
ReactDOM.render(<Parent/>, document.getElementById('app'));

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