React Native样式：使用多个StyleSheet.create()与引用包含所有样式的外部对象之间的性能差异

在React Native组件中，我有多个按钮的变体。大小，填充（实心，轮廓，透明）和样式（主要，次要，警告，信息等），以及其他几个变体。

这三种方法之间是否有性能差异？

另外，推荐使用哪种方法？

（1）创建多个样式表 - 可能每个变体交集都有20-30个对象

const getStyles = () => {
  // 实心填充
  const solidPrimary = StyleSheet.create({
    base: {
      color: "blue"
    },
    loading: {
      color: "darkblue"
    },
    disabled: {
      color: "darkblue"
    }
  });
  const solidSecondary = StyleSheet.create({
    base: {
      color: "lightblue"
    },
    loading: {
      color: "skyblue"
    },
    disabled: {
      color: "skyblue"
    }
  });
  // 轮廓填充
  const outlinePrimary = StyleSheet.create({
    base: {
      color: "white"
      borderColor: "blue"
    },
    loading: {
      color: "white"
      borderColor: "darkblue"
    },
    disabled: {
      color: "white"
      borderColor: "darkblue"
    }
  });
  // 等等。
  return {
    solid: {
      primary: solidPrimary,
      secondary: solidSecondary
      // 等等。
    },
    outline: {
      primary: outlinePrimary,
      secondary: outlineSecondary
      // 等等。
    }
    // 等等。
  }
}

相对于上面的方法，（2）将其声明为一个对象

const getStyles = () => {
  return {
    solid: {
      primary: StyleSheet.create({...}),
      secondary: StyleSheet.create({...}),
      // 等等。
    },
    outline: {
      primary: StyleSheet.create({...}),
      secondary: StyleSheet.create({...}),
      // 等等。
    }
    // 等等。
  }
}

相对于上面的方法，（3）引用外部对象

缺点：在StyleObj中的代码会变得重复，并且可能会有点难以写

const getStyles = ({fill, skin}) => {
  return StyleSheet.create({
    base: {
      // 引用对象处理填充和样式变体
      color: ...styleObj[fill][skin].base.color
      // 其他样式
    },
    loading: {
      color: ...styleObj[fill][skin].loading.color
      // 其他样式
    },
    disabled: {
      color: ...styleObj[fill][skin].disabled.color
      // 其他样式
    },
  });
}
// styleObj.js
  export const styleObj = {
    solid: {
      primary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
      secondary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
    },
    outline: {
      primary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
      secondary: {
        base: {...},
        loading: {...},
        disabled: {...},
      },
    },
    // 等等。        
  }