为何组件以子元素形式传props时反复重渲染？能否阻止？

1. 子元素传入时组件反复重渲染的原因 #

当你将<View><Text>Hello</Text></View>这类JSX直接作为子元素传给CustomImageBackground时，每次父组件（Home）重渲染，这段JSX都会被重新创建为一个全新的对象。React判断组件是否需要重渲染的核心逻辑是对比props的引用是否一致——一旦children的引用发生变化，CustomImageBackground就会触发重渲染。

另外你的Home组件本身会因为value状态更新（2秒后从0变为1）触发一次重渲染，后续如果有其他状态变化，还会再次触发，每次都会生成新的子元素引用，进而导致CustomImageBackground反复重渲染。

2. 阻止重渲染的方法（完全可行） #

有几种实用方案可以解决这个问题：

方案一：将子元素封装为独立组件并使用React.memo包裹 #

把重复渲染的子元素抽成单独的组件，用React.memo缓存它，确保只有当它自身的props变化时才会重渲染，同时它的引用会保持稳定：

import React, { useEffect, useState, memo } from 'react';
import { View, Text } from 'react-native';
import CustomImageBackground from '../../components/ImageBackground';
import Image from '../../Assets/Images/constant';

// 抽离子组件并缓存
const HomeContent = memo(() => (
  <View style={{ flex: 1 }}>
    <Text style={{ color: "#fff" }}>Hello</Text>
  </View>
));

const Home = () => {
  const [value, setValue] = useState(0)
  
  useEffect(() => {
    setTimeout(() => {
      let newValue = value + 1
      setValue(newValue)
    },2000)
  },[])

  console.log("::::value", value)
  
  return (
    <React.Fragment>
      <CustomImageBackground 
        backgroundImage={Image.loginBg}
        title="Home"
        headerImage={Image.loginBg}
      >
        <HomeContent />
      </CustomImageBackground>
    </React.Fragment>
  );
};

方案二：用useMemo缓存子元素JSX #

在Home组件内部，通过useMemo直接缓存子元素的JSX，确保每次父组件重渲染时，子元素的引用不变（除非依赖项列表里的值变化）：

import React, { useEffect, useState, useMemo } from 'react';
import { View, Text } from 'react-native';
import CustomImageBackground from '../../components/ImageBackground';
import Image from '../../Assets/Images/constant';

const Home = () => {
  const [value, setValue] = useState(0)
  
  useEffect(() => {
    setTimeout(() => {
      let newValue = value + 1
      setValue(newValue)
    },2000)
  },[])

  // 缓存子元素，依赖项为空则只创建一次
  const cachedChildren = useMemo(() => (
    <View style={{ flex: 1 }}>
      <Text style={{ color: "#fff" }}>Hello</Text>
    </View>
  ), []);

  console.log("::::value", value)
  
  return (
    <React.Fragment>
      <CustomImageBackground 
        backgroundImage={Image.loginBg}
        title="Home"
        headerImage={Image.loginBg}
      >
        {cachedChildren}
      </CustomImageBackground>
    </React.Fragment>
  );
};

方案三：给CustomImageBackground添加React.memo缓存 #

如果CustomImageBackground本身不需要频繁重渲染，可以直接用React.memo包裹它，让它只在props的引用真正变化时才触发重渲染：

// 在CustomImageBackground组件文件中
import React, { memo } from 'react';
import { View } from 'react-native';

const CustomImageBackground = memo(({ backgroundImage, title, headerImage, children }) => {
  // 组件原有实现逻辑
  return (
    <View>
      {/* 原有内容 */}
      {children}
    </View>
  );
});

export default CustomImageBackground;

这个方案可以和前两种方案结合使用，进一步优化渲染性能。

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