리액트 네이티브 랜더링 속도를 늦추는 안좋은 습관

1. Have mercy on constructor  ( 생성자에 너무 많은 연산들 )

-  Prefer moving it to componentDidMount

_ 연산에 관련된 것들은 componentDidMount 로  이동시켜서 사용하자.

 

2.  Be careful with functional props  ( props에 함수를 전달시 주의 )

class MyComponent extends Component {
    
    render() {
        return (
            <SomeComplexComponent
                prop1="Hey, I'm prop1"
                prop2="Hey, I'm prop2"
                onPress={(id) => doSomething(id)}/>
        );
    }   
}

Reason: onPress contains an arrow function.

So, every time render() of MyComponent is called — a new reference of onPress is created — since, its an arrow function. Thereby, forcing SomeComplexComponent to re-render for no reason.

 

 

How to avoid: Memoize or simply avoid creating arrow functions inside render likes this:

class MyComponent extends Component {
    
    render() {
        return (
            <SomeComplexComponent
                prop1="Hey, I'm prop1"
                prop2="Hey, I'm prop2"
                onPress={this.doSomething}/>
        );
    }
    doSomething = (id) => {
        this.setState({selectedId: id});
    }
}

 

3. Optimise shouldComponentUpdate() wherever possible

( 가능 한 shouldComponentUpdate 를 사용하여 최적화)

class ParentComponent extends Component {
    render() {
        return (
            <ChildComponent {...this.props.article} />
        )
    }
}

class ChildComponent extends Component {
    render() {
        return (
            <SomeComponent
                title={this.props.title}
                description={this.props.description}
                imageUrl={this.props.imageUrl}/>
        );
    }
}

 

ChildComponent 에  데이터중에 title 이나  description , imageUrl 이 변경 될 때만 랜더링 하면된다  그렇기 위해서는  아래의 코드를  이용해서  최적화를 해보자 

shouldComponentUpdate (nextProps, nextState) { 
    return (nextProps.title! == this.props.title || nextProps.description! == this.props.description || nextProps.imageUrl! == this.props.imageUrl) 
}

 

ps. React.PureComponent는 shouldComponentUpdate가 이미 구현되어 있는데, props와 state를 얕은 비교를 통해 비교한 뒤 변경된 것이 있을 때만 리렌더링한다.
즉, React.PureComponent를 사용하면 React애플리케이션 성능을 향상시키는 데 가장 중요한 것 중 하나인 shouldComponentUpdate를 신경쓰지 않아도 된다.
하지만 props나 state가 복잡한 데이터 구조를 포함하고 있다면, props와 state를 비교하는 과정에서 의도하지 않은 결과가 발생할 수 있다.
(얕은 비교(shallow comparison)와 깊은 비교(deep comparison)의 차이를 알면 무슨 의미인지 알 것이다.)

 

 

4. 애니메이션

애니메이션 작성은 일반적으로 앱을 느리게 만들 수있는 가장 까다로운 부분 중 하나입니다. 애니메이션은 일반적으로 두 가지 유형이 있습니다.

• JS 기반 : JS 스레드에서 모든 프레임 계산을 수행하고 최종 프레임을 네이티브로 전달합니다.
• 순수 네이티브 : 모든 애니메이션을 메인 스레드로 오프로드하고 브리지 통신을위한 최소한의 또는 아예 필요하지 않습니다.

항상 순전히 네이티브 애니메이션을 사용하는 것을 선호합니다. 자세한 내용은 여기로 이동하는 것이 좋습니다 .

Butter Smooth Scrolling Animations in React Native