리 액 트 가 pure render 를 실현 할 때 bind(this)위험 에 주의 하 세 요!

Pure render 는 더 이상 말 하지 않 겠 습 니 다.다른 글 링크 를 동봉 합 니 다react 어떻게 성능 최대 화(전송)
당신 이 immutable 을 사용 하 든 안 하 든 Pure render 에 도달 하고 싶다 면 아래 는 당신 이 주의 할 만 한 가치 가 있 습 니 다!
하루 는 여느 때 와 마찬가지 로 즐 거 운 마음으로 react 라 고 쓰 여 있 습 니 다.@Pure Render 로...


export default class extends Component {
...
 render() {
  const {name,age} =this.state;
  return (
   <div>
    <Person name={name} age={age} onClick={this._handleClick.bind(this)}></Person>//bug   
   </div>
  )
 }
...
}

문 제 를 발 견 했 습 니 다.Person 이라는 하위 구성 요소 에 있어 서 부모 구성 요소 re-render 를 사용 할 때 Person 의 앞 뒤 두 개의 props 가 변 하지 않 았 더 라 도 re-render,즉 immutable.js 를 사용 하 는 것 도 좋 지 않 습 니 다.
원래,부모 구성 요 소 는 매번 render,handleClick 은 bind(this)를 실행 합 니 다.이렇게handleClick 의 인용 은 매번 바 뀌 기 때문에 Person 의 앞 뒤 두 번 의 props 는 사실 다르다.
그럼 어 떡 해?bind(this)를 없 앨 까요?안 돼,써 야 돼.
정 답 은 부모 구성 요소 가 render 에서 bid(this)를 실행 하지 않 고 constructor 에서 미리 실행 하도록 하 는 것 입 니 다.수정 한 후에.


export default class extends Component {
 constructor(props){
  super(props)
  this._handleClick=this._handleClick.bind(this)//    
 }
 render() {
  const {name,age} =this.state;
  return (
   <div>
    <Person name={name} age={age} onClick={this._handleClick}></Person>
   </div>
  )
 }
...
}

참고:React.js pure render performance anti-pattern
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

nginx 에서 사이트 아이콘 표시 설정

전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

리 액 트 가 pure render 를 실현 할 때 bind(this)위험 에 주의 하 세 요!

좋은 웹페이지 즐겨찾기