JoshMarler / react-juce

Write cross-platform native apps with React.js and JUCE
https://docs.react-juce.dev
MIT License
764 stars 79 forks source link

StyleSheet API #225

Open nick-thompson opened 3 years ago

nick-thompson commented 3 years ago

This issue is for supporting a styles API similar to React Native's StyleSheet: http://reactnative.dev/docs/stylesheet

Currently all of our style props are passed inline to any given view component during each render pass. This works fine, but I suspect we'll gain a lot in terms of performance by switching to a stylesheet API. The goal here is that instead of writing our styles as we have been, we will instead write:

function MyView(props) {
  return (<View style={styles.container}>{props.children}</View>);
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'red',
    padding: 20,
  }
});

This is a subtle change, but the point is this:

I want to also mention here the discussion we had in #217: https://github.com/nick-thompson/blueprint/pull/217#discussion_r567448122. This discussion is about using props.getWithDefault on the native side. Generally I suspect we'll still lean on props.getWithDefault within our setProperty overrides because we always want to render something if we can. But with the atomic/bulk stylesheet updates we can more safely assume that during a styles update, all default style properties are indeed set by the time we care about them. Currently I'm not sure exactly how much that will change the way we write this type of code, but it's worth mentioning.