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

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이 실제로 구현 될 때 런타임이 아닌 컴파일 할 때 잘못된 스타일 속성의 오류가 표시됩니다.

---

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

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

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

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

---

혜택이 없습니다. 기간.

오해 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 = {
   ...
}

참고 URL : https://stackoverflow.com/questions/38958888/react-native-what-is-the-benefit-of-using-stylesheet-vs-a-plain-object