React，RN，组件上的内联样式真的很糟糕吗? [英] React, RN, Is inline styling on the compoent really bad?

问题描述

我不太了解样式，但我们的团队成员坚持认为 #2-method 在 #1-method 中更难做到.

I don't know much about styling, but our team member insists that #2-method is much harder to do in #1-method.

#1 的方式真的很糟糕，所以我应该尝试让他转换吗?

Is the #1 way really bad so that I should try to make him switch?

render() {
    return (
         <p style={{color: 'red'}}>
            Example Text
        </p>
    );
}

2

render() {
  const styles = {
    color: 'blue'
  }

  return (
      <p style={styles}>
        Example Text
      </p>
  );
}

推荐答案

它们都可以正常工作，但内联样式有一个问题.

Both of them works for sure but there is a catch with inline styling.

React Native 的 StyleSheet.create({}) 缓存样式，因此应用需要通过桥发送较少的数据.如果您将样式声明为内联样式，那么在每次渲染时，您的样式都会通过桥发送来绘制，这会降低性能.

React Native's StyleSheet.create({}) caches styles so app needs to send lesser data over the bridge. If you declare the styles as inline then over every render your styles are sent over the bridge to draw which lessens the performance.

当您使用 StyleSheet.create 声明样式时，只有随后的渲染样式会被一些提供更好性能的快速键之类的机制引用.

When you declare styles using StyleSheet.create only subsequent renders styles are referenced by some quick key like mechanism which gives better performance.

所以是的，尽量使用 StyleSheet.create

这里有更多关于 React Native 中的样式表和样式的信息 媒体链接

Here is some more info regarding StyleSheet and styling in React Native Medium Link

这篇关于React，RN，组件上的内联样式真的很糟糕吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！