React Native中PureComponent能否适配样式数组？多样式优化疑问

Question #

I know that when styles are created via StyleSheet.create() and a child component extends PureComponent, the following code gets performance optimization:

import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
  render() {
    return (
      <View>
        <Child style={styles.x} />
      </View>
    )
  }
}

Now I'm wondering if this optimization works the same way for multi-style scenarios, and I'm worried that array literals might block the optimization effect.

Answer #

Great question! Let's break down why the single-style case works first, then address your concern about array literals.

First, a quick recap: PureComponent uses shallow comparison to decide whether to re-render. When you pass styles.x (created via StyleSheet.create()), this is a stable reference—StyleSheet.create() returns objects with fixed references that don't change between renders. So the shallow comparison sees the same style prop each time, and skips re-rendering the Child unless other props change.

Now, for multi-style array literals like <Child style={[styles.x, styles.y]} />:

• Every time the Parent renders, the array literal [styles.x, styles.y] creates a new array reference in memory. Even though the individual style objects inside the array are stable, the array itself is a new object each time.
• PureComponent's shallow comparison checks if the style prop reference is the same as before. Since it's a new array every render, the comparison fails, and the Child will re-render unnecessarily—this breaks the performance optimization you're relying on.

How to fix this #

To keep the optimization working with multiple styles, you need to ensure the style prop has a stable reference. Here are a few practical approaches:

1. Pre-merge styles with StyleSheet.flatten
   Create the merged style once (outside the render method) using StyleSheet.flatten to lock in a stable reference:

   import React, { Component } from 'react'
   import { View, StyleSheet } from 'react-native'
   import Child from './Child'
   import styles from './stylesheets'
   
   // Pre-merge styles once when the component loads
   const mergedStyles = StyleSheet.flatten([styles.x, styles.y])
   
   export default class Parent extends Component {
     render() {
       return (
         <View>
           <Child style={mergedStyles} />
         </View>
       )
     }
   }
   

2. Store merged styles as an instance property
   If your merged styles depend on component props/state, compute them once in the constructor (and update them in componentDidUpdate if values change):

   export default class Parent extends Component {
     constructor(props) {
       super(props)
       this.mergedStyles = StyleSheet.flatten([styles.x, styles.y])
     }
   
     render() {
       return (
         <View>
           <Child style={this.mergedStyles} />
         </View>
       )
     }
   }
   

3. Use memoization (for functional components)
   If you were using a functional parent component, useMemo can cache the array reference so it only updates when dependencies change:

   import React, { useMemo } from 'react'
   import { View } from 'react-native'
   import Child from './Child'
   import styles from './stylesheets'
   
   const Parent = () => {
     // Empty dependency array means this array reference stays stable forever
     const mergedStyle = useMemo(() => [styles.x, styles.y], [])
     return (
       <View>
         <Child style={mergedStyle} />
       </View>
     )
   }
   

In short: Array literals for styles will break the PureComponent optimization because they create new references on each render. Use one of the above methods to keep the style reference stable, and you'll retain the performance benefits.

内容的提问来源于stack exchange，提问作者mpyw