css - 多次调用StyleSheet.create是否会影响性能？

通常，您在StyleSheet.create之外声明Component。
但是，我在StyleSheet.create内添加了render()以便在某些页面上利用redux state的优势。

每次重新渲染时，您都将呼叫StyleSheet.create这是问题吗？

import React, { Component } from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import { Constants } from 'expo';
import TestView from './TestView';

const styles = StyleSheet.create({
  text:{
    fontSize:14,
  }
})

const useStateStyles = fontSize => StyleSheet.create({
   text:{
    fontSize:fontSize,
  }
})

export default class App extends Component {
  state = {
    fontSize:14,
  }

  render() {
    const { fontSize } = this.state;
    this.styles = useStateStyles(fontSize);
    return (
    <View style={{flex:1,marginTop:20}}>
    <Button
    title="+"
    onPress={()=>{this.setState({
      fontSize:fontSize+2
    })}}
    />
    <Button
    title="-"
    onPress={()=>{this.setState({
      fontSize:fontSize-2
    })}}
    />
     <Text style={styles.text}>{fontSize}</Text>
     <Text style={this.styles.text}>{fontSize}</Text>
     </View>
    );
  }
}

如果StyleSheet.create是外部的且固定的，则State更改时将无法更改。
因此，在useStateStyles中调用render。

https://snack.expo.io/SJOMaiwXH

最佳答案

您不必多次调用style代码。您可以使用state value

您可以直接在status value中声明style。

import React, { Component } from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import { Constants } from 'expo';



export default class App extends Component {
  constructor(props){
    super(props);
      this.state = {
    fontSize:14,
  }
  }

  render() {
    const { fontSize } = this.state;
    return (
    <View style={{flex:1,marginTop:20}}>
    <Button
    title="+"
    onPress={()=>{this.setState({
      fontSize:fontSize+2
    })}}
    />
    <Button
    title="-"
    onPress={()=>{this.setState({
      fontSize:fontSize-2
    })}}
    />
     <Text style={{fontSize: this.state.fontSize}}>Test text</Text>
     </View>
    );
  }
}

关于css - 多次调用StyleSheet.create是否会影响性能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57385885/