React native StyleSheet.create的意义是什么

我正在阅读，我想知道

样式表.create

函数的意义是什么

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

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

但我不明白这和：

const styles = {
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
};

---

下面是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;
}

create（obj:T）：{[key:$Keys]：number}{
var结果：T=（{}:any）：T）；
for（obj中的var键）{
validateStyle（键，obj）；
结果[键]=ReactNativePropRegistry.register（obj[键]）；
}
返回结果；
}

我不是任何方面的专家。实际上我从未使用过它，但以下是我的见解。似乎

create

对您的密钥进行了某种验证，并注册它们以做出反应

我认为您可以跳过验证，只需不调用

create

，但我不确定

ReactNativePropRegistry.register

的确切功能

---

TL；DR尽可能使用

样式表.create（）

答案是正确的，但还有更多

总结如下：

它验证Nico提到的样式

如报告中所述：

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

报告中还提到：

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

---

您可能知道，跨网桥发送数据是一项成本非常高的操作，对应用程序的性能有很大影响。因此，使用

StyleSheet.create（）

可以减少桥接器上的压力。

StyleSheet.create

不再增加性能增益

引用github的评论：

@alloy我理解docs所说的，但可以证明代码：

const myStyle: ViewStyle = { flex: 1 } export const FlexView:
React.SFC = (props) => <View style={myStyle}>{props.children}</View>

constmystyle:ViewStyle={flex:1}导出constflexview:
React.SFC=（props）=>{props.children}

与之相比，具有几乎相同的性能（甚至稍快一点）

const s = StyleSheet.create({ flex: { flex: 1 } }) 
export const FlexView: React.SFC = (props) => <View style={s.flex}>{props.children}</View> 

const s=StyleSheet.create（{flex:{flex:1}）
export const FlexView:React.SFC=（props）=>{props.children}

因为如果你查看源代码，你会发现最新的数据块被有效地提取到了这里（参见： ):

const s={flex:{flex:1}
export const FlexView=（props）=>{props.children}

是的，在以前 RN的版本它是样式的全局注册表，但它甚至更多 慢，因为它实际上从未穿过桥梁边界（从0.55开始证明

---

分支机构）正如@Mentor在评论中指出的那样：

---

.create

仍然只在开发中进行验证，不做其他任何事情。在生产中，它只返回对象。请参阅存储库中的源代码

可以替换为

从'react native'导入{…，ViewStyle，TextStyle}；
界面样式{
someViewStyle:ViewStyle，
someTextStyle:TextStyle，
}
常量样式={
someViewStyle:{…}，
someTextStyle:{…}，
}

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

ViewStyle

和

TextStyle

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

样式

对象：

const someViewStyle:ViewStyle={…}，
const someTextStyle:TextStyle={…}，

Aakash，我对本地/移动应用程序开发非常陌生，所以我没有意识到跨网桥发送数据的成本很高。感谢您的帮助和引用资料。您是否注意到上述文档中的“（尚未实现）”注释？截至2017年4月RN V0.43，它仍然存在。我的理解是，这还不能节省桥梁交通。除非doco已经过时。我仍然想知道跳过StyleSheet.create（）而仅仅使用静态（非内联）样式是否真的会降低性能。。。至少在传递到组件堆栈之后，可以检查和记录它们@spechter-仍可对其进行检查和记录。使用

样式表。展平（…）

将它们转换回对象，以便执行此操作。“尚未实现”（从0.54开始仍然存在）与后来关于性能优势的断言相矛盾，因此我怀疑有人只是在实现时忽略了删除它。无论如何，如果你担心的话，应该是比较容易分析的。。。设置一个定期更改（或多次创建和销毁）且具有大量样式属性的视图，并使用样式表或跳过样式表检查处理器使用情况。

。create

仍然只在开发中验证，不做其他任何操作。在生产中，它只返回对象。请参阅存储库中的源代码。另一个好处是样式表还可以验证样式对象中的内容。这意味着，如果样式对象中的任何属性或值出现任何错误，控制台将在编译期间而不是在运行时抛出错误。+1因为这很有用，但您应该在回答中用几句话解释原因。链接可能会衰减，然后变成一个没有上下文或证据的语句：-）参考ethanneff answer，更新版本的源代码已更改，现在它似乎只返回非常相同的对象：

const s = { flex: { flex: 1 } }
export const FlexView = (props) => <View style={s.flex}>{props.children}</View>

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;
}