React Native-StyleSheet와 일반 객체를 사용하면 어떤 이점이 있습니까?

StyleSheet.create()일반 개체와 비교 하여 사용할 때의 이점은 정확히 무엇입니까 ?

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
}

Vs.

const styles = {
  container: {
    flex: 1
  }
}

React native 의 StyleSheet.js 의 주석 섹션에서 직접 인용

코드 품질 :

• 스타일을 렌더링 함수에서 멀리 이동하면 코드를 더 쉽게 이해할 수 있습니다.

• 스타일에 이름을 지정하는 것은 렌더링 기능의 저수준 구성 요소에 의미를 추가하는 좋은 방법입니다.

공연:

• 스타일 개체에서 스타일 시트를 만들면 매번 새 스타일 개체를 만드는 대신 ID로 참조 할 수 있습니다.

• 또한 브리지를 통해 한 번만 스타일을 보낼 수 있습니다. 모든 후속 사용은 ID를 참조합니다 (아직 구현되지 않음).

또한 StyleSheet는 스타일 시트 콘텐츠의 유효성도 검사합니다. 따라서 StyleSheet이 실제로 구현 될 때 런타임이 아닌 컴파일 할 때 잘못된 스타일 속성의 오류가 표시됩니다.

혜택이 없습니다. 기간.

오해 1 : StyleSheet성능이 더 우수하다

StyleSheet와 외부에서 선언 된 개체 간에는 성능 차이가 전혀 없습니다 render( render매번 내부에 새 개체를 만드는 경우에는 다릅니다 ). 성능 차이는 신화입니다.

신화의 기원은 React Native 팀이 이것을 시도했지만 성공하지 못했기 때문일 수 있습니다. 공식 문서 어디에서도 성능에 대한 정보를 찾을 수 없습니다 : https://facebook.github.io/react-native/docs/stylesheet.html , 소스 코드에는 "아직 구현되지 않음"이라고 명시되어 있습니다 : https://github.com/ facebook / react-native / blob / master / Libraries / StyleSheet / StyleSheet.js # L207

통념 2 : StyleSheet컴파일 타임에 스타일 객체의 유효성을 검사합니다

이것은 사실이 아닙니다. 일반 JavaScript는 컴파일 타임에 개체의 유효성을 검사 할 수 없습니다.

두가지:

• 런타임에 유효성을 검사하지만 스타일 개체를 구성 요소에 전달할 때도 유효성을 검사합니다. 차이 없음.
• Flow 또는 TypeScript를 사용하는 경우 컴파일 타임에 유효성 검사를 수행 하지만 개체를 ​​스타일 소품으로 구성 요소에 전달하거나 아래와 같이 개체를 적절하게 타입 힌트하면 그렇게합니다. 차이도 없습니다.

const containerStyle: ViewStyle = {
   ...
}

수락 된 답변은 OP 질문에 대한 답변이 아닙니다.

질문은 인라인 스타일과 const클래스 외부 의 차이가 아니라 StyleSheet.create일반 객체 대신 사용해야하는 이유 입니다.

내가 찾은 것을 조금 조사한 후 다음과 같습니다 (정보가 있으면 업데이트하십시오). 의 advatanges StyleSheet.create는 다음과 같아야합니다.

1. 스타일의 유효성을 검사합니다.
2. 스타일을 ID에 매핑 한 다음 매번 새 개체를 만드는 대신이 ID로 내부를 참조하므로 성능이 향상됩니다. 따라서 매번 모든 새 개체를 보내지 않기 때문에 장치 업데이트 프로세스도 더 빠릅니다.

이 스타일 시트를 사용하는 것이 더 성능이 좋은 것을 고려하는 데 사용하고, 한 권장 버전 0.57까지 RN 팀 최대로 이런 이유로,하지만 정확하게 지적으로는 이제 더 이상 권장되지 않는 다른 답변 이 질문에.

RN 문서는 지금, 다음과 같은 이유로 스타일 시트를 권장 나는 이러한 이유는 렌더링 기능의 외부를 만들어 일반 객체에 동일하게 적용 것이라고 생각하지만 :

• 스타일을 렌더링 함수에서 멀리 이동하면 코드를 더 쉽게 이해할 수 있습니다.
• 스타일에 이름을 지정하는 것은 렌더링 기능의 저수준 구성 요소에 의미를 추가하는 좋은 방법입니다.

그래서 어떻게 생각 하는 일반 객체를 통해 스타일 시트를 사용 가능한 혜택은?

1) 반대 주장에도 불구하고 RN의 v0.59.10 내 테스트는 것을 나타냅니다 할 호출 할 때 몇 가지 검증을 얻을 StyleSheet.create()하고 타이프 (그리고 아마도 흐름)도 컴파일시에 오류를보고합니다. 컴파일 시간을 확인하지 않아도 스타일 이 렌더링에 사용 되기 전에 런타임 유효성 검사를 수행하는 것이 여전히 유용하다고 생각합니다 . 특히 이러한 스타일을 사용하는 구성 요소가 조건부로 렌더링 될 수있는 경우에 그렇습니다. 이렇게하면 모든 렌더링 시나리오를 테스트 할 필요없이 이러한 오류를 선택할 수 있습니다.

2) RN 팀 이 StyleSheet 을 권장 한다는 점을 감안할 때 앞으로도 StyleSheet를 사용하여 향후 성능을 개선 할 수있을 것이라는 희망이있을 수 있으며 다음과 같은 다른 개선 사항도 염두에두고있을 수 있습니다.

3) 현재 StyleSheet.create()런타임 유효성 검사가 유용하지만 약간 제한됩니다. 당신이 흐름 또는 타이프 라이터로 얻을 것이라는 유형 검사로 제한 될 것 같다, 그렇게 말 데리러 flex: "1"이나 borderStyle: "rubbish",하지만 width: "rubbish"그 비율 문자열이 될 수 있기를. RN 팀이 백분율 문자열 또는 범위 제한과 같은 사항을 확인하여 향후 이러한 유효성 검사를 개선 할 수도 있고, StyleSheet.create()더 광범위한 유효성 검사를 수행하기 위해 자체 함수로 래핑 할 수도 있습니다.

4) StyleSheet를 사용하면 더 많은 것을 제공하는 react-native-extended-stylesheet 와 같은 타사 대안 / 확장 프로그램으로 쉽게 전환 할 수 있습니다.

를 통한 스타일 생성 은 StyleSheet.create전역 변수 __DEV__가 true로 설정된 경우에만 유효성 검사를 통과 합니다 (또는 Android 또는 IOS 에뮬레이터 내에서 실행되는 동안 React Native DEV 및 PROD 변수 참조 ).

함수 소스 코드는 매우 간단합니다.

create < +S: ____Styles_Internal > (obj: S): $ReadOnly < S > {
  // TODO: This should return S as the return type. But first,
  // we need to codemod all the callsites that are typing this
  // return value as a number (even though it was opaque).
  if (__DEV__) {
    for (const key in obj) {
      StyleSheetValidation.validateStyle(key, obj);
      if (obj[key]) {
        Object.freeze(obj[key]);
      }
    }
  }
  return obj;
}

개발 중에 런타임 유효성 검사를 수행하고 개체를 고정시키기 때문에 사용하는 것이 좋습니다.

StyleSheetTypeScript에서 유효성 검사를 입력하는 것을 제외하고는 일반 개체와의 차이점을 찾지 못했습니다.

예를 들어 다음과 같습니다 (입력 차이에 유의하십시오).

import { View, Text, Image, StyleSheet } from 'react-native';
import logo from './logo.svg';

export default class App extends Component {
  render() {
    return (
      <View style={styles.someViewStyle}>
        <Text style={styles.someTextStyle}>Text Here</Text>
        <Image style={styles.someImageStyle} source={logo} />
      </View>
    );
  }
}

const styles: StyleSheet.create({
  someViewStyle: {
    backgroundColor: '#FFF',
    padding: 10,
  },
  someTextStyle: {
    fontSize: 24,
    fontWeight: '600',
  },
  someImageStyle: {
    height: 50,
    width: 100,
  },
});

다음과 같습니다.

import { View, Text, Image, ViewStyle, TextStyle, ImageStyle } from 'react-native';
import logo from './logo.svg';

export default class App extends Component {
  render() {
    return (
      <View style={styles.someViewStyle}>
        <Text style={styles.someTextStyle}>Text Here</Text>
        <Image style={styles.someImageStyle} source={logo} />
      </View>
    );
  }
}

const styles: {
  someViewStyle: ViewStyle;
  someTextStyle: TextStyle;
  someImageStyle: ImageStyle;
} = {
  someViewStyle: {
    backgroundColor: '#FFF',
    padding: 10,
  },
  someTextStyle: {
    fontSize: 24,
    fontWeight: '600',
  },
  someImageStyle: {
    height: 50,
    width: 100,
  },
};