ReactNative 성능 최적화
카탈로그
-）console.log
//React Native __DEV__ 。
// console
if (!__DEV__) {
global.console = {
info: () => {},
log: () => {},
warn: () => {},
debug: () => {},
error: () => {},
};
}
-）PureComponent
shouldComponentUpdate return true 또는false가 구성 요소의 렌더링 여부를 결정합니다
//PureComponent shouldComponentUpdate
//
//return true render
shouldComponentUpdate(newProps,newState){
return swallowCompare(newProps,this.props) || swallowCompare(newState,this.state);
}
//
부모 구성 요소 재렌더링은 하위 PureComponent 구성 요소의componentWillReceiveProps->shouldComponentUpdate->@end를 터치합니다
state
부모 구성 요소 리렌더는 하위 PureComponent 구성 요소의componentWillReceiveProps->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate->@end--
-) 메소드 생성 주의
방법의 정의는 onPress=()=>{}를 사용해야 합니다.render에서this를 직접 호출합니다.onPress를 누르면 됩니다. 그렇지 않으면render에서 새로운 인용을 만들어서 하위 구성 요소가 속성이 바뀌었다고 생각하고 다시 render
//
//Father render ， ，
//Son props， PureComponent render
{console.log('1')}}>
-）setNativeProps
일부 비교적 큰 JSX 페이지의 경우, 때로는 그 중의 작은 블록의 스타일을 동적으로 수정하기 위해서만, setState () 를 사용하여 스타일 값을 동적으로 바꾸면render는 전체view 트리의diff를 만들 수 있습니다.아래와 같은 코드를 채택할 수 있다.
주의: 이 방법은 사용을 추천하지 않으며 가독성이 비교적 떨어진다.구성 요소가 합리적으로 렌더링되어야 하는지를 제어하기 위해 구성 요소를 합리적으로 분리하고 세분화해야 한다
this.refs.view.setNativeProps({
style:{
width:100,
height:1,
position:'absolute',
left: this.leftBegin * SCREEN_WIDTH,
}
})
-）InteractionManager
componentDidMount() {
//
// this.fetchData()
// render
// fetchData ， fetchData setState runAfterInteractions
InteractionManager.runAfterInteractions({
this.fetchData();
})
}
참고 자료
홈페이지https://www.jianshu.com/p/57f2e987c879
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
