React의 Render 메서드에서 화살표 함수를 바인딩하거나 인라인할 때 성능 문제를 방지하는 방법은 무엇입니까?

Render 메서드 내에서 화살표 함수 바인딩 또는 인라인을 피하는 방법

React 구성 요소에서는 성능 최적화를 위해 렌더링 메서드 내에서 화살표 함수 바인딩 또는 인라인을 피하는 것이 중요합니다. . 다시 렌더링하는 동안 이전 메서드를 재사용하는 대신 새 메서드가 생성되어 성능 문제가 발생합니다.

다음 예를 고려하세요.

<input onChange={this._handleChange.bind(this)} />

이 문제를 해결하려면 _handleChange를 바인딩할 수 있습니다. 생성자의 메소드:

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

또는 속성 초기화 구문을 사용할 수 있습니다:

_handleChange = () => {};

그러나 onClick 핸들러에 추가 매개변수를 전달해야 할 때 문제가 발생합니다. . 예를 들어, 할일 앱에서는 색인이나 이름을 기반으로 배열에서 항목을 삭제해야 할 수도 있습니다.

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

이 접근 방식은 문서에 언급된 대로 각 구성 요소 렌더링으로 새 콜백을 생성합니다. .

렌더링 메서드 내부 바인딩의 대안

1. 하위 구성 요소 만들기:

지도 함수 내부의 콘텐츠를 별도의 하위 구성 요소로 이동하고 값을 props로 전달합니다. 이렇게 하면 하위 구성 요소에서 함수를 호출하고 그 값을 props로 전달된 함수에 전달할 수 있습니다.

부모:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!