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

Question

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

有关和钩子，请参阅此 Expo Snack的完整来源。useIntervaluseForceUpdate

• 屏幕
  

• 代码

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

标签： javascriptreact-native

Answer 1

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

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

为了尽量减少每次重新渲染时的重新初始化，我们可以使用useCallbackreact 中的钩子。

import  React, {useCallback} from 'react';

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