Performance 在React Native中，动态造型最有效的方式是什么？

在React Native中，可以使用创建类似css的样式表。使用

styleshee.create

支持普通js对象的主要原因是提高了性能。但是，您通常可能希望动态地设置组件的样式，通常是基于它们的道具。我基本上找到了三种方法：

<强>注释如下：考虑<代码> const样式…< /C> >在组件之外声明，因为它是一个常见的模式，您可能希望在不同组件之间共享样式。把树点下面的所有东西都看作是渲染函数的一部分。

使用样式数组：

const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
return <View style={[styles.viewStyle, {color: this.props.color}]} />

constyles=StyleSheet.create（{viewStyle:{backgroundColor:'red'}）
...
返回

使用Stylesheet.flatte：

const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}})
return <View style={flattenedStyle} />

constyles=StyleSheet.create（{viewStyle:{backgroundColor:'red'}）
...
const flattedstyle=StyleSheet.flatte（styles.viewStyle，{{color:this.props.color}）
返回

使用函数创建样式表：

const styles = (color) => StyleSheet.create({
    viewStyle: {
        backgroundColor:'red',
        color: color
        }
    })
...
const style = styles(this.props.color).viewStyle
return <View style={style} />

constyles=（color）=>StyleSheet.create({
视图样式：{
背景颜色：'红色'，
颜色：颜色
}
})
...
const style=样式（this.props.color）.viewStyle
返回

---

我想知道哪种方法对性能来说是最好的，或者是否还有其他更高性能的方法？我认为选项2和3根本不可能，因为根据道具更改动态创建新样式表破坏了样式表的整体用途。我很高兴在这个问题上有任何想法或提示

您可以使用React钩子来记忆样式表创建，但首先需要进行一些性能检查，以确定样式表创建实际上是否是值得优化的CPU和/或内存占用

下面是一个例子：

const styles = (color) => StyleSheet.create({
    viewStyle: {
        backgroundColor:'red',
        color: color
        }
    })

/*
even though makeStyle is defined in EVERY render,
React will only run it ONCE for any given props.color distinct value.
The resulting value `styles` survives re-renders
*/

const makeStyle = () => styles(props.color)
const styles = useMemo(makeStyle, [props.color]);

---

这里是

< P>你在JS库中考虑CSS吗？比如<代码>样式组件< /C> > /P> 您可以传递道具并获得动态风格：

---

在这里，您可以在react native中为每个样式设置动态样式

像这样

<Text style={styles.simpleText('red')}>Required field</Text>

// In styling
const styles = StyleSheet.create({
     simpleText: (colorProp = 'black') => ({ // default black set
           fontSize: 14,
           color: colorProp,
     })
})

必填字段
//在造型上
const styles=StyleSheet.create({
simpleText:（colorProp='black'）=>（{//默认黑色集合）
尺寸：14，
颜色：colorProp，
})
})

---

您还可以为条件样式传递任何数据类型

对于简单的动态样式来说可能有点过分，但Reanimated的性能非常好，将以60fps的速度运行样式转换

它通过提前声明动画/转换所需的所有样式并在本机线程上运行这些样式来存档这些样式，以便在JS->native代码桥上进行最少的通信

在他们的“关于”页面上，这里有一个更好的解释

方法之一

//HomeScreen
草莓的
//styles.js
从“react native”导入{StyleSheet}；
从“../../theme”导入{Colors}；
导出默认样式表。创建({
容器：{
背景颜色：颜色。颜色较浅，
},
过滤器按钮：isSelected=>({
填充：15，
backgroundColor:isSelected？Colors.background.primary:Colors.background.secondary
}),
});样式表。创建
实现非常快，
usemo
也可以。问题是，是否值得使用memonization（不使用纯子组件），或者每次渲染都可以创建新对象。难以想象，如此复杂的库会提供最佳性能。当然，最好的开发者体验，但这不是问题所在。