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

Question

通常，您在 Component 之外声明 StyleSheet.create。但是，我在 render() 中添加了 StyleSheet.create 以在某些页面上利用 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 改变时它不能改变。所以在render中调用useStateStyles。

https://snack.expo.io/SJOMaiwXH

Answer 1

您不必多次调用样式 代码。您可以使用状态值

您可以直接在样式中声明状态值。

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>
    );
  }
}