Question

我正在阅读React Native docs / tutorial，我想知道error process payment功能的重点是什么。

例如，本教程包含以下代码：

StyleSheet.create

但我不明白它与之间的区别：

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

Answer 1

TL; DR 请尽可能使用StyleSheet.create()。

answer by Nico是正确的，但还有更多内容。

总结：

验证Nico提及的样式
正如documentation：

从样式对象制作样式表可以通过ID引用它，而不是每次都创建一个新的样式对象。

在documentation：

它还允许仅通过桥发送一次样式。所有后续用途都将引用一个id（尚未实现）。

您可能知道，通过网桥发送数据是一项非常昂贵的操作，会对应用程序的性能产生重大影响。因此，使用StyleSheet.create()可以减轻桥上的压力。

Answer 2

这里有create的源代码。

create<T: Object, U>(obj: T): {[key:$Keys<T>]: number} {
  var result: T = (({}: any): T);
  for (var key in obj) {
    StyleSheetValidation.validateStyle(key, obj);
    result[key] = ReactNativePropRegistry.register(obj[key]);
  }
  return result;
}

我不是React的专家。我实际上从未使用它，但这是我的见解。似乎create对您的密钥进行某种验证并将它们注册到React。

我认为您可以通过不调用create来跳过验证，但我不确定ReactNativePropRegistry.register究竟做了什么。

Reference to the source

Answer 3

StyleSheet.create不再增加性能提升。

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29265#issuecomment-430783289

Answer 4

正如@Mentor 在评论中指出的那样：

<块引用>

.create 仍然只在开发中验证，不做其他任何事情。在生产中，它只返回对象。查看存储库中的源代码。

source code

<块引用>

create<+S: ____Styles_Internal>(obj: S): $ObjMap<S, (Object) => any> {
  if (__DEV__) {
    for (const key in obj) {
      StyleSheetValidation.validateStyle(key, obj);
      if (obj[key]) {
        Object.freeze(obj[key]);
      }
    }
  }
  return obj;
}

我认为这个评论应该更引人注目。所以我将其发布为答案。

此外，我想指出验证 - 是一件好事，但还有另一种更好的验证方式 - Typescript：

const styles = StyleSheet.create({
  someViewStyle: { ... },
  someTextStyle: { ... },
})

可以替换为

import { ..., ViewStyle, TextStyle } from 'react-native';

interface Styles {
  someViewStyle: ViewStyle,
  someTextStyle: TextStyle,
}
const styles = {
  someViewStyle: { ... },
  someTextStyle: { ... },
}

它不仅仅是静态时间检查，它还允许区分 ViewStyle 和 TextStyle。

但是有更多的代码行。因此，就我个人而言，如果可能的话，我更喜欢不使用 styles 对象：

const someViewStyle: ViewStyle = { ... },
const someTextStyle: TextStyle = { ... },

StyleSheet.create有什么意义

4 个答案: