Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

I'm reading the React Native docs / tutorial, and I'm wondering what the point of the StyleSheet.create function is.

For example, the tutorial has the following code:

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

But I don't understand the difference between that and:

const styles = {
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
};
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
673 views
Welcome To Ask or Share your Answers For Others

1 Answer

TL;DR Always use StyleSheet.create() when you can.

The answer by Nico is correct, but there is more to it.

To summarize:

  1. It validates the styles as mentioned by Nico
  2. As mentioned in the documentation:

Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.

  1. Also mentioned in the documentation:

It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

As you might know, sending the data across the bridge is a very costly operation that has significant impact on the performance of the application. So, using StyleSheet.create() you reduce the strain on the bridge.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

548k questions

547k answers

4 comments

86.3k users

...