Question

使用time对普通对象有什么好处？

StyleSheet.create()

Vs以上。

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

Answer 1

直接从React native

的StyleSheet.js的评论部分引用

代码质量：



通过将样式移离渲染功能，您可以更轻松地理解代码。



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



性能：



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



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

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

Answer 2

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

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

经过一番研究，我发现以下内容（如果有任何信息，请更新）。 StyleSheet.create的优先级应为以下内容：

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

Answer 3

除了在TypeScript中进行输入验证外，我没有发现StyleSheet与普通对象之间有任何区别。

例如，这（注意键入差异）：

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

Answer 4

只有在将全局变量StyleSheet.create设置为true时（或在Android或IOS模拟器中运行时，请参见React Native DEV and PROD variables），通过__DEV__创建样式将通过验证。

函数source的代码非常简单：

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

我建议使用它，因为它会在开发过程中执行运行时验证，还会冻结对象。

Answer 5

没有好处。期间。

神话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 = {
   ...
}

Answer 6

过去，人们一直认为使用StyleSheet的性能更高，因此RN团队一直使用 recommended直到版本0.57，但现在不再推荐使用在another answer中正确指出了该问题。

RN documentation现在出于以下原因推荐StyleSheet，尽管我认为这些原因同样适用于在render函数之外创建的普通对象：

通过将样式从渲染功能中移开，您可以代码更容易理解。
命名样式是在低层添加含义的好方法渲染功能中的组件。

那么，我认为与普通对象相比，使用StyleSheet可能带来的好处是什么？

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。

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

6 个答案:

神话1：`StyleSheet`的表现更好

神话2：`StyleSheet`在编译时验证样式对象

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

6 个答案:

神话1：StyleSheet的表现更好

神话2：StyleSheet在编译时验证样式对象

神话1：`StyleSheet`的表现更好

神话2：`StyleSheet`在编译时验证样式对象