javascript - 为什么条件渲染的 React 组件在刷新时会闪烁，而同一组件的内联版本却不会闪烁？

Question

我被难住了。为什么一个闪烁而另一个不闪烁？
这是一个强制屏幕刷新的人为示例。

查看完整源代码this Expo Snack对于 useInterval 和 useForceUpdate Hook 。

• 屏幕
  

• 代码

  const App = () => {
    const forceUpdate = useForceUpdate();
    useInterval(() => {
      forceUpdate();
    }, 1000);
  
    const imageSource = {
      uri:
        'https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1000&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D',
    };
  
    const shouldRenderImage = true;
  
    const MyImage = () => (
      <>
        {shouldRenderImage && <Image style={styles.image} source={imageSource} />}
      </>
    );
  
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>Conditional Inside Component</Text>
        <MyImage />
  
        <Text style={styles.paragraph}>Conditional Render Component</Text>
        <>
          {shouldRenderImage && (
            <Image style={styles.image} source={imageSource} />
          )}
        </>
      </View>
    );
  };
  

Answer 1

这是因为你正在使用功能组件。所以每次你的状态发生变化时，您的所有功能将再次初始化。所以每当状态改变时，你的Image组件就会重新初始化，(它会再次挂载)

 const MyImage = () => (
    <>
      {shouldRenderImage && <Image style={styles.image} source={imageSource} />}
    </>
  );

为了最大限度地减少每次重新渲染时的重新初始化，我们可以使用 React 中的 useCallback 钩子(Hook)。

import  React, {useCallback} from 'react';

const MyImage = useCallback(() => (
    <>
      {shouldRenderImage && <Image style={styles.image} source={imageSource} />}
    </>
  ),[shouldRenderImage]);