React Native - 使用StyleSheet与普通对象有什么好处？

Question

使用StyleSheet.create()vs普通对象的好处是什么？

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

比.

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

Answer 1

直接从React native 的StyleSheet.js的评论部分引用

代码质量:

• 通过将样式移离渲染函数,您可以更轻松地理解代码.

• 命名样式是为渲染函数中的低级组件添加含义的好方法.

性能:

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

• 它还允许仅通过桥发送一次样式.所有后续用法都将引用id(尚未实现).

StyleSheet也会验证样式表内容.因此,在实际实现StyleSheet时,在编译时显示错误样式属性的任何错误,而不是在运行时.

Answer 2

没有好处。期。

误区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

误区二：StyleSheet在编译时验证样式对象

这不是真的。纯JavaScript无法在编译时验证对象。

两件事情：

• 它会在运行时进行验证，但是将样式对象传递给组件时也会进行验证。没有不同。
• 如果您使用Flow或TypeScript，它将在编译时进行验证，但是，一旦将该对象作为样式道具传递给组件，或者您正确键入了如下所示的对象，它也会进行验证。也没有区别。

const containerStyle: ViewStyle = {
   ...
}

Answer 3

接受的答案不是OP问题的答案.

问题不在于内联样式和const类外部的区别,而是为什么我们应该使用StyleSheet.create而不是普通对象.

经过一些研究我发现的是以下内容(如果您有任何信息,请更新).建议StyleSheet.create应该如下:

1. 它验证了样式
2. 更好的性能,因为它创建了样式到ID的映射,然后它在内部引用了这个ID,而不是每次都创建一个新对象.因此,即使更新设备的过程也更快,因为您不会每次都发送所有新对象.

Answer 4

因此，今天，2021 年 9 月，在阅读了所有答案并做了一些研究之后，我创建了一个关于使用Stylesheet而不是普通对象的摘要。

\n

\n
1. 根据React Documentation，当复杂性开始增长时，您应该使用样式表。
\n

\n

\n

style 属性可以是一个普通的旧 JavaScript 对象。这就是我们通常使用的示例代码。\n随着组件复杂性的增加，使用 StyleSheet.create 在一个地方定义多个样式通常会更简洁。

\n

\n

\n
2. 在模拟器中，使用样式表时将显示ERROR，而使用普通对象时将仅显示WARNING。
\n
3. 根据第 2 项，看起来它在编译时进行了一些验证。（很多人说\xe2\x80\x99是一个神话）
\n
4. 如果将来需要迁移第三方库，对于其中一些库react-native-extended-stylesheet，例如使用样式表，会更容易。
\n
5. 你有一些促进发展的方法和属性。例如，该属性StyleSheet.absoluteFill将执行position: \'absolute\', left: 0, right: 0, top: 0, bottom: 0，或者该方法compose()将允许您组合两种样式并覆盖它。
\n

\n

PS：性能答案看起来是一个神话。

\n

我的想法？

\n

根据第 2 项和第 5 项，转到样式表而不是普通对象。

\n

Answer 5

它曾经被认为是使用样式表是更好的性能，并且被 推荐为此由RN队，直到0.57版本，但它现在已不再推荐作为正确地指出另一个答案这个问题。

该RN文档现在建议样式表如下原因，但我认为这些理由同样适用于所创建的渲染功能之外的普通对象：

• 通过将样式从渲染函数中移开，您可以使代码更易于理解。
• 命名样式是为渲染函数中的低级组件添加含义的好方法。

所以，我觉得什么都使用样式表在普通对象可能带来的好处？

1) 尽管有相反的说法，我在 RN v0.59.10 上的测试表明您在调用时确实得到了一些验证，StyleSheet.create()并且打字稿（可能还有流）也会在编译时报告错误。即使没有编译时检查，我认为在样式用于渲染之前对其进行运行时验证仍然是有益的，尤其是在可以有条件地渲染使用这些样式的组件的情况下。这将允许在无需测试所有渲染场景的情况下拾取此类错误。

2）鉴于样式表是由RN小组建议，他们可能仍然有使用样式表来改善未来业绩的希望，他们可能在考虑到其他可能的改进，以及，例如：

3）当前的StyleSheet.create()运行时验证很有用，但有点有限。它似乎仅限于使用 flow 或 typescript 进行的类型检查，因此会选择 say flex: "1"or borderStyle: "rubbish"，但不是width: "rubbish"因为它可能是百分比字符串。RN 团队将来可能会通过检查百分比字符串或范围限制之类的内容来改进此类验证，或者您可以包装StyleSheet.create()自己的函数以进行更广泛的验证。

4) 通过使用 StyleSheet，您可能更容易过渡到第三方替代品/扩展，如提供更多功能的react-native-extended-stylesheet。