react-native
렌더링 모범 사례

소개

JSX의 함수

성능을 높이려면 JSX에서 배열 (람다) 함수를 사용하지 않는 것이 중요합니다.

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md 에서 설명한대로 :

JSX 소품의 바인드 호출 또는 화살표 함수는 모든 단일 렌더링에서 아주 새로운 기능을 생성합니다. 가비지 컬렉터가 필요한 것보다 더 많이 호출되도록하기 때문에 성능에 좋지 않습니다. 새로운 함수가 소품의 참조 평등 검사를 사용하여 업데이트해야하는지 결정하는 구성 요소로 전달되는 경우 불필요한 재 렌더링이 발생할 수도 있습니다.

그래서 jsx 코드 블록이 이런 식으로 있다면 :

                    <TextInput
                      onChangeValue={  value => this.handleValueChanging(value) }
                    />

또는

                    <button onClick={ this.handleClick.bind(this) }></button>

당신은 더 나아질 수 있습니다 :

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

과

                    <button onClick={ this.handleClick }></button>

handleValueChanging 함수 내의 올바른 컨텍스트를 구성 요소의 생성자에 적용 할 수 있습니다.

          constructor(){
            this.handleValueChanging = this.handleValueChanging.bind(this)
          }

구성 요소로 전달 된 함수 바인딩에 더 많은

또는 다음과 같은 솔루션을 사용할 수 있습니다 : https://github.com/andreypopp/autobind-decorator 간단히 바인드 할 각 메소드에 @autobind 데코레이터를 추가하십시오 :

        @autobind
        handleValueChanging(newValue)
        {
            //processing event
        }